개발일기

리액트 아이콘(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..

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 : 값을 캐싱

useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면 사용! 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 사용! import : import React, { useEffect } from "react"; useEffect와 의존성 배열(dependency array) 의존성 배열 : 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행! // useEffect의 두번째 인자가 의존성 배열이 들어가는 곳!! useEffect(()=>{ // 실행하고 싶은 함수 }, [의존성배열]) 1. 의존성 배열이 빈 배열일 경우 2. 의존성 배열에 값이 있을 경우

주특기(React) 과제 - Lv1 My Todo List 만들기 가장 주석이 많고, 헷갈렸던 부분! 리액트 과제를 하면서 기본기의 중요성을 다시 한번 알게 됐다. 분명 들었고, 블로그에 적었는데 기억이 나지 않아 찾아보고 다시 확인하는 과정이 많았다ㅜㅜ 하나를 알더라고 정확하게 이해하고 넘어가야겠다. 결과물