React 데이터 흐름

리액트에서는 컴포넌트가 굉장히 중요하다는 것은 다 알고있을 것이다.

그러기 떄문에 리액트 에서는 우선 컴포넌트를 다 만들어 놓은뒤 조립을 하게 되는데 이를 상향식 으로 앱을 만든다고 한다.

• 테스트가 쉽고 확장성이 좋다.

그러기 떄문에 만약 앱의 디자인을 전달받고 나면 컴포넌트로 나누는 작업을 먼저 해야한다.

하나의 컴포넌트는 한가지 일만 하기 떄문에 단일 책임에 따라서 컴포넌트를 구성 해야 하며 컴포넌트 구성은 트리구조로 만들수 있어야 한다!

또한 컴포넌트는 데이터를 전송할수 있는데 이는 부모트리에서 자식 트리로 전송을 해야하며 이것을 데이터 흐름이 하향식 이라는 것을 의미 한다.

• 하향식 데이터 흐름이 매우 중요 한데 왜냐하면 React는 단방향 데이터 흐름 이 매우 중요하기 떄문이다.

또한 부모 컴포넌트로부터 전달받은 데이터(props)는 자식 컴포넌트 입장에서는 어디서 왔는지 전혀 알지 못한다.

• 개발자 입장에서는 알수 있지만 컴포넌트 입장에서 말한 것이다.

하지만 가끔씩 역방향 데이터 흐름이 발생할 수가 있다.

• 만약 부모 컴포넌트의 상태가 자식 컴포넌트에 의해서 바뀌게 되는 경우
• 트윗 추가 같은 액션이 있다.

  적어놓은 트윗에 있는 내용이 아래 추가 되지만 적혀 있는 트윗의 내용도 초기화 될떄

만약 이런식의 코드를 짜게 될떄 필요한 것은 State 끌어올리기이다.

• 용어가 이런 용어이지 결론은 상태를 변경시킬수 있는 함수를 props로 보내서 하위 컴포넌트에서 함수를 실행 하는 것이다.
• 콜백을 이용한다.

  콜백 : 다른함수의 인자로 전달되는 함수

참고자료

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

Effect Hook

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는Side Effect가 있다고 한다.

let foo = 'hello'
function bar(){foo = 'world';}
bar()

이와 같은 코드를 Side Effect가 있다고 한다

우리가 배울 UseEffect는 이와 같은 Side effect이다.

useEffect(()=>{실행할 함수}, 조건)

조건에 올수 있는 인자는 다양하게 있다.

• [] : 컴포넌트가 처음 생성될떄만 useEffect를 적용한다.
• 공백 : 컴포넌트 처음생성, props가 업데이트, 상태가 업데이트 될떄마다 실행이 된다. => 변경사항이 있을떄마다 실행 된다.
• [종속성 배열] : 어떠한 상태값, 변수 를 넣게 되면 그 변수나 상태값이 변경될떄마다 실행이 된다.

이 부분은 적기보다는 실제로 실습 해보는 과정이 더 많은 이해가 될 것이다!!

심화 내용

만약 외부에서 AJAX를 통해서 데이터르 받아오고 그것을 변수에 할당한뒤 페이지에 값을 뿌려 준다 그후 filter과정을 하게 된다고 생각을 해보자.

• 쉽게 설명하면 외부값을 페이지에뿌리고 필터를 통해서 뿌린 값중 일부만을 보겠다

이떄 useEffect는 두가지 방식으로 사용 될수가 있다.
컴포넌트 내부에서 처리
컴포넌트 외부에서 처리

내부에서 처리 하는 경우에는 클라이언트의 부담이 늘어나게 되고 외부에서 처리하는 방법 같은 경우에는 서버가 부담을 가지게 된다.

• 처리해야하는 로직이 추가 되기 때문에

외부에서 처리하는 방법은 useEffect의 조건으 []을 주는 것이다.
그렇게 되면 변화가 있게되면 리 랜더링 이 되기 떄문에 자동으로 서버에서 계속해서 값을 가져 오게 된다.

내부에서 처리하는 과정은 변수에 외부에서 가져온 값을 할당하고 useEffect조건으로 해당 변수를 넣어 주는 것이다.

• 두 방법 모두 장단점이 존재 하기 떄문에 상황에 맞게 적절하게 사용할수 있도록 하자!!

참고 자료

• https://dev.to/edefritz/throttle-a-series-of-fetch-requests-in-javascript-ka9
• https://webclub.tistory.com/607
• https://developer.mozilla.org/ko/docs/Web/HTTP/Caching

실습

실습 과정에 대해서 직접적으로 다루지는 않을 것이다.

글로써 기본적인 개념을 설명하자면

우리가 fetch를 사용하게 되면 해당 url에 있는 데이터 값을 가져 올 것 이다.

• 이 말을 생각보다 쉽게 생각한 경향으로 인해서 문제 해결에 시간이 좀 걸리게 되었다.

A라는 쿼리 문이 없는 url이 있다고 생각해 보자
A라는 url에는 정보가 담겨 있을 것이다.

하지만 A?distance=1 이라는 쿼리를 추가하면 A에 있는 데이터중 거리가 1인 데이터를 가져오게 된다.

• 이 부분을 잘 이해했으면 좋겠다.

우리가 props로 전송을 할떄 객체로 전송을 하는 방법이 있다.

바로 {}를 사용 하는 것인데.
({a:"abc, b: "cdcd"})
이런 식으로 props또는 변수로 보내 주었을떄

그것을 받는 함수 및 컴포넌트는 단순히
({a,b})
이렇게 키값만 맞춰주면 된다.

그렇게 되면 a,b에는 객체로 보내진 키에 맵핑이 되게 되고 그 value에 해당하는 값을 받게 된다.

그후 값을 받으면 값을 설정해 주면 된다.

• 이 부분은 나도 자세히 설명을 못하겠다.. 제대로 알고 있는 것이 아니라 스스로 직접 해보면서 알아가길 바란다!!