지금 만들고 있는 페이지가 버튼을 클릭했을 때 페이지가 바뀌지 않고 처리할 것들이 많아서 useState를 이렇게나 많이 써버렸다... 사실 이 hook을 자유자재로 잘 쓰지는 못 했었는데 이번 기회에 아주 확실하게 익히게 되었다. 몇 가지 정리를 해보자면 1. styled-components을 이용해 스타일을 적용할 때 useState를 이용해 그 값을 바꾸고자 한다면 props로 넘겨주면 된다! const Sticker_Img = styled.img` display: flex; width: ${(props) => props.size}; height: ${(props) => props.size}; margin: 2vw; `; const [imgSize, setImgSize] = useState("37v..

이전까지 React 프로젝트에서 스타일을 지정할 때 #hi.js 안녕 #hi.css .style { display: flex; height: 100%; width: 100%; } 이런 식으로 진행했었다... 그런데 이런 식으로 하면 클래스 이름이 겹치는 태그가 있을 때 css가 둘 다 적용되는 문제가 발생한다...! 따라서 많은 사람이 같이 개발하는 프로젝트에서는 styled-components를 사용하는 것이 효율적이다. 1. styled-components 설치 npm install styled-components 2. styled-components 사용법 클래스를 안 쓰는 대신 컴포넌트를 만들어준다. 따라서 기존에 버튼 이렇게 썼던 코드를 버튼 이렇게 써주면 된다..! import styled f..

반복문을 쓸 때 for문을 주로 쓰는데 map() 함수를 사용하면 더 편하게 array에서 값을 꺼낼 수 있다, 사용 방법은 간단하게 배열.map()에 callback 함수를 넣어주면 된다! (당연히 화살표 함수도 가능) arr.map(callback 함수) 예제1 const arr = [1, 2, 3, 4, 5]; //일반 함수 const map1 = arr.map(function(x){x+2)); //화살표 함수 const map1 = arr.map(x=> x+2); console.log(map1); //[3,4,5,6,7] 예제2 콜백함수의 파라미터는 두 개까지 들어갈 수 있다. 위의 예제1은 element 하나만 넣은 거고 index까지도 넣을 수 있다. const arr = [ 10, 20, 3..