tailwind-css https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com tailwind css의 컨셉인 Utility-First로 인해 HTML과 CSS를 왔다갔다하면서 원하는 태그의 스타일을 변경하기 위해 시간을 쏟을 필요가 없고 클래스명도 고민할 필요가 없다 각 css 요소 수준의 유틸리티 클래슬르 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있지만 디자인이 복잡해질 수록 코드가 못생겨진다 ㅠㅠ 또한 클래스 속성명에 대한 러닝커브가 존재..

뭘 조심해야 할까👀 비동기 & batching useState 훅을 사용해서 상태를 업데이트 하고 바로 아래 console로 업데이트한 상태를 출력하면 이전의 상태 값이 나온다. const updateCount = () => { setCount(count + 1); // 2 console.log(count); // 1 } 왜 이럴까? 리액트에서 useState를 사용해서 상태를 업데이트할 때 비동기적으로 상태를 한번(batching)에 업데이트하기 때문이다. → 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문이다! 만약 변경된 상태를 이용하고 싶으면 useEffect를 이용해서 상태가 변경된 후 상태를 사용하자! const updateCount = () => { setCount(co..

How - useInview 무한 스크롤을 스크롤 이벤트를 통해서 구현하기도 하고 여러 방법이 있겠지만 react-intersection-observer의 useInView 훅을 사용해 쉽게 구현할 수 있다. yarn add react-intersection-observer useInView의 첫번째 파라미터로 ref를 설정할 수 있고 두번째 파라미터는 ref가 걸린 요소가 화면에 보이면 true로 값이 변경되고 화면에 보이지 않으면 false로 변한다 const [ref, isView] = useInView() 아래 예시를 살펴보자! 맨 아래 요소에 ref를 걸고 useEffect를 이용해서 맨 아래 요소가 화면에 보이는 여부에 따라 isView가 변경될 때마다 콘솔에 isView를 출력해보자! imp..

상태관리란? 상태관리는 쉽게 말해 전역 데이터 관리이다. 렌더링과 연결된 데이터를 형제나 부모와 자식 컴포넌트끼리 주고 받기는 생각보다 까다롭다. 형제 컴포넌트끼리 데이터를 주고 받으려면? 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨준다. 자식 컴포넌트에서는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해준다. 만약 1촌 관계 컴포넌트가 아니라 6촌 관계 컴포넌트가 같은 데이터를 사용하려고 한다면? props를 6단계 이상 걸쳐서 넘겨줘야한다;; 🤢 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 게 상태관리이다. 많이 사용되는 상태관리 툴 ContextAPI() Redu..