개발일기

& & : active - ButtonL1이 활성화되면 {}를 적용시켜라! "&"를 사용하면 현재 스타일드 컴포넌트의 자기 자신을 나타 활성화 상태: onClick을 예로 들면 클릭해서 떼는 시점까지를 말함 const ButtonL1 = styled.button` width: 200px; height: 50px; margin: 5px 5px; border-radius: 5px; border: 3px solid green; background-color: white; font-weight: 700; cursor: pointer; // 내용물 정렬 display: flex; flex-direction : row; justify-content: center; align-items: center; &:activ..

리액트 아이콘(react-icons) 1. react-icons 주소 https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 2. 라이브러리 설치하기 yarn add rea..

부모 컴포넌트에서 children을 받아 Header 아래 렌더링! // Header와 children이 별도로 렌더링! function Layout({ children }) { return ( {children} ) } export default Layout; 부모 컴포넌트에서 children을 받아 Header 안에 렌더링! → Header만 출력되고 내용물은 보이지 않게 됨ㅜㅜ // 이렇게 작성하면 Header 안에 children을 렌더링해서 상단만 출력됨 function Layout({ children }) { return ( {children} ) } export default Layout;

state state 정리한 내용✏️ https://roqkfdlfrl.tistory.com/46 [React] Props 구조분해할당 / State / useState / onClick Event / onChange Event 구조분해 할당과 Props Child 컴퍼넌트에서 어떤 props들이 실제로 쓰이는지 직관적으로 알기 쉬움 State state는 UI를 바꾸기 위해서 사용!!! state : 컴포넌트안에서 변할 수 있는 값 1) useState + onClick Event roqkfdlfrl.tistory.com props props 정리한 내용✏️ https://roqkfdlfrl.tistory.com/48 [WIL] 08.21 ~ 08.27 Virtual DOM(가상 돔) DOM : Doc..

Redux "중앙 state 관리소"를 사용할 수 있게 도와주는 패키지(라이브러리) "중앙 state 관리소"에서 생성된 State = Global state Global state들을 관리하는 것 = 전역 상태 관리 리덕스를 사용하면 State를 공유할 때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 됨 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 됨 중앙 State 관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 됨 - 리덕스는 전역상태 관리 라이브러리 - 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소 ..

리렌더링 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두! 최적화 불필요한 리렌더링이 발생하지 않게 한다 = 비용 발생을 줄인다 = 최적화(Optimization) 한다 최적화하는 대표적인 방법 - memo(React.memo) : 컴포넌트를 캐싱 - useCallback : 함수를 캐싱 - useMemo : 값을 캐싱