BEB Section 2 - 데이터 흐름의 이해와 비동기 요청 처리

 

React 의 데이터 흐름

• React를 페이지 단위가 아닌, 컴포넌트로 생각한다.
  
  • 만들고자 하는 것이 있으면 그에 대한 컴포넌트를 다 지정하고, 상향식을 작성한다 : 테스트가 쉽고 확장성에 용이
• 컴포넌트 디자인을 할 때, 개별적으로 나누게 된다. 아래 그림을 참조하면 이해할 수 있다.

Sample Twittler 출처 : 코드스테이츠

 개별적으로 나누는 이유는 단일 책임 원칙에 따라 구분되기 때문이다. 트리 구조로 생각하면 <Twittler> 가 맨 위에 있는 부모 노드가 되는 것이고, <NewTweetForm>과 <Tweets>은 <Twittler>의 자식 노드가 된다. <SingleTweet>은 <Tweets>의 자식노드가 된다.

 

• 데이터는 위에서 아래로 흐른다 : 단방향 데이터 흐름

출처 : 코드스테이츠

 속성과 값에 대한 입력이 생기면 그 입력값에 대한 출력값이 생겨야한다. 컴포넌트는 바깥에서 props를 이용해 데이터를 마치 argument나 속성처럼 전달받을 수 있다. 데이터를 전달하는 건 부모 컴포넌트가 되는 것이고, 받는 건 자식 컴포넌트가 되는 것이다.

• 이 원칙이 중요한 이유는 나중에 데이터 진위 여부를 알아낼 때 props를 통해서 전달 받은 컴포넌트의 데이터가 어디서 왔는지 알 수 없기 때문이다.

 

• 모든 데이터는 상태(state)로 둘 필요가 없다.

 상태가 특정 컴포넌트에서만 유의미 하면 특정 컴포넌트에 두면 되는데, 하나의 상태로 여러 개의 컴포넌트가 영향받게 된다면 공통 소유 컴포넌트를 찾아 상태를 위치해야한다. 그래서 아까 맨 위에 언급했던 트리 구조에서도, <Tweets>가 공통 소유 컴포넌트가 된다는 것이다.

 

 

 

How to lift up states : 상태 끌어올리기

컴포넌트로 다 지정해줘도 데이터가 state로부터 온건지, 하드코딩으로 입력한 내용이 어디서 왔는지 알 수 없다. 그렇다고 해서 데이터 흐름을 역방향으로 줄 수도 없다. 그래서 React는

 

 

상위 컴포넌트의 상태 변경 함수는 이 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하도록 한다

 

 

 이 방법을 지킨다면 단방향 데이터 흐름을 지치고 있고, 우리는 이것을 상태를 끌어올린다 라고 한다. 아래 링크는 코드 예시이다.

 

https://ko.reactjs.org/docs/lifting-state-up.html

State 끌어올리기 – React

 

 

Side Effect : 부수 효과

 함수 내 구현한 것이 함수 외부에 영향을 끼치는 경우에 Side Effect가 일어난다고 말한다. 쉬운 예시를 들자면 아래 코드블럭과 같다.

 

let sayHi = "Hello!";

function greetSth(){
  sayHi = "Javascript!";
}

greetSth();

 

 let으로 선언해주었고, 함수를 통해 sayHi의 값이 바뀐다. 그렇게 해서 함수를 호출하면 아까 위에서 언급한 것처럼 함수 내에서 구현한 것이 함수 외부에 영향을 끼쳐 Side Effect 가 발생하게 된다.

 

 

Pure Function : 순수 함수

 오직 함수 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 순수 함수는 입력을 통해 전달된 값을 수정하지 않고, 그에 대한 Side Effect도 존재하지 않는다. 어떠한 argument가 주어진다고 해도 항상 똑같은 return 값이 주어진다는 것을 보장하고 있다. 그래서 예측 가능한 함수이기도 하다.

 

 

Effect Hook : useEffect(function)

 useEffect의 argument는 함수이다. 이에 대한 조건은 아래와 같다.

• 컴포넌트 생성 후 처음 화면에 렌더링되는 경우
• 새로운 props가 전달되며 렌더링되는 경우
• 상태가 바뀌며 렌더링되는 경우

 이렇게 매번 새로운 컴포넌트가 렌더링되는 경우 Effect Hook 이 실행된다. 하지만 Hook을 쓸 때는 최상위에서만 호출할 수 있고, 함수 내에서 호출할 수 있다.

 

 

Effect Hook : useEffect(function, [dep1, dep2, ...])

 useEffect에서 쓸 수 있는 또 다른 argument는 배열이다. boolean 형태가 아닌, 어떤 값의 변경이 일어날 때, 즉 종속성 배열을 의미한다.  dep1와 dep2의 값에 변동이 생길 때 함수가 실행된다. 

 

 Effect Hook은 한번만 실행되는데, 만약 두 가지 경우가 있다고 가정하자.

1. 빈 배열을 넣었을 경우 : useEffect(function, [])
2. 기본 형태로만 작성되었을 경우 : useEffect(function)

 빈 배열을 두 번째 argument로 받았을 경우, 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 경우에 빈 배열을 작성해주며 사용할 수 있다.