TIL 8주차 1,2일 - React 데이터 흐름, effect hook

Sang heon lee·2021년 6월 29일

TIL 리스트

목록 보기

32/60

React의 개발 방식은 컴포넌트 단위로 개발을 시작하여 앱을 제작하는 상향식(bottom-up)개발 입니다.
장점으로는 테스트가 쉽고, 확장성이 좋습니다.
단방향 데이터 흐름(one-way data flow)
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 함수의 인자(arguments)처럼 전달 받는데, 데이터를 전달하는 주체는 부모컴포넌트 입니다.
이는 데이터 흐름이 하향식(top-bottom)임을 의미합니다.

만약 두개의 자식 컴포넌트가 하나의 상태(State)에 영향을 받을 때,
이 하나의 상태(State)는 공통의 부모 컴포넌트에 위치시켜야 합니다.
자식 컴포넌트에서의 어떤 변화(ex:클릭 이벤트)로 인해 상태(State)를 바꾸어야만 하는 상황이 온다면 부모에게 데이터를 전달해줘야 합니다.
이는 위에서 말한 단방향 데이터 흐름을 위반합니다.
이를 해결할 수 있는 방안이 State 끌어올리기(Lifting State Up) 입니다.
써먹는 방법은 상태를 변경시키는 함수(setState)를 특정 함수에 포함시키고 특정 함수를 자식 컴포넌트에 props로 전달합니다.(마치 콜백함수 처럼!)
그리고 props로 전달받은 특정 함수를 자식 컴포넌트에서 실행합니다.

단방향 데이터 흐름? 갑자기? 왜 쓰는거야?
- 단방향 데이터 흐름을 쓰지 않으면 기능 변경 사항이 발생할 때 마다 코드를 계속 작성해야 합니다. 이는 코드의 흐름을 알기 어렵게 만들고 전체 코드를 복잡하게 만듭니다.
자식 컴포넌트에서 상태 변경을 부모 컴포넌트에게 통보하고
부모 컴포넌트에서는 변경된 상태(State)에 대해서 자식 컴포넌트에게
다시 단방향 데이터 흐름을 통하여 렌더링 한다.

Side Effect(부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side effect가 있다고 이야기 합니다.

let foo = 'hello'

function bar(){
  foo = 'world'
}

bar(); // 함수 bar 는 side effect를 발생시킵니다.

useEffect는 컴포넌트 내에서 side Effect를 실핼할 수 있게 하는 Hook입니다.
useEffect(함수)의 첫번쨰 인자는 함수(A) 입니다. 함수(A) 내에서 side effect를 실행합니다. 함수(A)는 다음과 같은 조건에서 실행됩니다.
1. 컴포넌트 생성 후 처음 화면에 렌더링(표시)
2. 컴포넌트에 새로운 props가 전달되며 렌더링
3. 컴포넌트에 상태(state)가 바뀌며 렌더링
Hook 사용 시 주의 사항
https://ko.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
1. 최상위에서만 Hook을 호출합니다.(여기서 최상위는 root 개념이 아닌 부모컴포넌트를 의미)
2. React 함수 내에서 Hook을 호출합니다.

useEffect의 두번째 인자는 배열입니다. 이 배열은 조건을 담고 있습니다. 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미합니다.
따라서, 해당 배열엔 어떤 값의 목록이 들어갑니다. 이 배열을 특별히 종속성 배열이라고 부릅니다.
useEffect(함수, [종속성1, 종속성2, ...])
배열 내의 종속성1, 또는 종속성 2의 값이 변할 때, 첫번쨰 인자의 함수가 실행됩니다. 배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행됩니다.
useEffect(함수, []) 처럼 빈 배열 인 경우
- 컴포넌트가 처음 생성될때만 effect 함수가 실행됩니다.
- 처음 단 한번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있습니다.
useEffect(함수) 처럼 아무것도 넣지 않는 경우
- useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행