반응형
React.js가 멋진 이유 중에 하나는 component를 refresh 한다는 점이다.
useEffect에 입력하는 두 가지 요소가 있는데, 하나는 실행 코드 그리고 다른 하나는 dependencies
: react가 지켜봐야 하는 것들
그것들이 변화할 때 react.js에서 코드를 실행시킨다.
즉 두 번째 매개변수가 [] 이와 같이 빈 경우에는 React에서 지켜볼 사항이 없기 때문에 코드 실행 중에 처음으로 한 번 실행되고 만다.
state가 변화할 때 component가 재실행되는 간단한 구조로 React가 작동한다.
모든 코드가 재실행 되는 것
UI의 관점에서는 새로운 데이터가 들어올 때 마다 자동으로 새로고침 되기 때문에 좋은 일이긴 하지만, 문제는 어떤 코드들은 이렇게 계속 계속 실행되면 안되는 경우도 있고, 이게 useEffect를 사용하는 이유이다.useEffect를 통해 언제 코드를 실행할 지 결정할 수 있다
• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해
• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 아규먼트 처럼 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.
🏴 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(wa can use memo)
🏴 propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능
반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
#7.0 To Do List part One (0) | 2023.05.23 |
---|---|
#6.4 Cleanup (0) | 2023.05.23 |
#6.2 Deps (0) | 2023.05.23 |
#6.0 Introduction (0) | 2023.05.23 |
#5.1 Tour of CRA (0) | 2023.05.23 |