리액트(2)

- state and Lifecyecle

리액트 클래스 컴포넌트에서 주로 사용하는 것들 

  - State : 리액트 Component의 변경가능한 데이터  -> state는 개발자가 정의함(렌더링이나 데이터 흐름에 사용되는 값만 포함해야함), javaScript 객체

- 모든 클래스 컴포넌트는 contrtuctor라는 생성자를 가지고 있음, 생성자 내부에 선언

 

- 생명주기 : 리액트 컴포넌트는 생성, 사용, 사망주기 가짐

사망은 상위 컴포넌트에 표시되지 않는 순간이다.

 

- class 컴포넌트에서는 반드시 setState함수를 사용해서 state를 업데이트 해야함

 

 

- 리액트 훅 , 리액트 16.8버전부터 나옴 

 - 함수컴포넌트에 사용 - 클래스의 모든 기능 사용할 수 있게 됨 

 - 값이 바뀔 때 마다 재 렌더링

useState -> state 변수를 사용, 변수와 설정 함수를 변수마다 설정해 주어야함.

 

useEffect -> 렌더링이 끝난 후 실행되는 함수 

첫번째 인자는 함수, 두번째 인자는 배열, 두번째 인자가 변경될때마다 컴포넌트 재생성

두번째 인자가 없으면 수시로 호출

 

useMemo ->  시간이 오래걸리는 함수의 호출된 결과값을 저장하여 빠르게 로딩하는 방식 -> 연산량을 줄일 수 있음. 렌더링이 진행되는 동안에 실행됨, 의존성 배열을 넟지 않은 경우 매 렌더링 때마다 실행, 의존성 배열이 빈 배열일 경우 컴포넌트 마운트 시에만 호출됨

 

useCallback -> 함수, 의존성 배열, userMemo와 비슷, 의존성 배열이 변경된 경우 함수 호출

useRef -> 변경가능한 하나의 current를 가진 하나의 상자