🦋 React 데이터 흐름

  • react의 개발방식의 가장 큰 특징은 페이지 아닌 컴포넌트단위로 시작한다는 것
  • 페이지 프로토타입 그림을 받았으면 먼저 컴포넌트를 찾아보자
  • 찾아낸 컴포넌트들을 만들고 다시 페이지를 조립해나가자
  • 이게 상향식(bottom up), 테스트가 쉽고 확장성이 좋음
  • 디자이너에게 앱의 디자인을 전달받으면 컴포넌트 계층구조로 나누는게 가장먼저할일
  • 하나의 컴포넌트는 한가지 일만 한다.
  • 이를 트리로 정리하면 다음과 같다. 이제 데이터를 어디에 둘지 정하자
  • 컴포넌트는 바깥에서 props를 이용해 데이터를 마치 전달인자처럼 받을수 있다.
  • 즉 데이터전달주체는 부모 컴포넌트이다. 이는 데이터흐름이 하향식임을 의미한다.
  • 매우 중요한개념. 단방향데이터흐름
  • 변하는 값인 상태를 구분해야함
  • props로 전달되지 않고, 변하는값이면 state다
  • 상태는 어디에 위치시켜야 하는가? 만약 하나의 상태가 두 컴포넌트에 영향받는다면?
  • 그럴땐 두 자식의 공동 부모 컴포넌트에 상태를 위치해야함
  • 다른 컴포넌트와 공유할 필요없는 상태는 한 컴포넌트에 두는것이 좋다.
  • 상태위치를 정하고 나니, 부모컴포넌트의 상태가 하위컴포넌트에 의해 변하는걸 볼수있음
  • 하위 컴포넌트가 부모의 상태를 바꾸는 상황, 어떻게 해결? => State 끌어올리기
  • 이는 상태를 변경시키는 함수를 하위컴포넌트에 props로 전달해서 해결할 수 있음
  • 즉 상위 컴포넌트의 "상태를 변경하는 함수"를 하위 컴포넌트로 전달하여, 하위 컴포넌트에서 해당 함수를 실행하는 방법이다.

🦋 Side Effect

  • Side Effect : 함수내에서 어떤구현이 외부함수에 영향을 미치는 경우
  • React에서는 컴포넌트 내에서 fetch를 사용해 API정보를 가져오거나, 이벤트를 활용해 DOM 직접 조작할 때
let foo = 'hello';

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

bar(); // bar는 Side Effect를 발생시킵니다!

🦋 Pure Function

  • 순수함수 : 오직 매개변수로 전달된 입력만이 함수의 결과에 영향을 주는 함수를 의미
function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'
  • 순수함수에는 Side Effect가 없음

🦋 React의 함수 컴포넌트

  • 리액트 함수 컴포넌트는 props가 입력, JSX Element가 출력임. 순수함수다.
  • 하지만 AJAX요청이나 타이머와 같은 React와 상관없는 API를 사용할때가 있다.
  • 이는 react입장에서 Side Effect인데, 이를 다루는 Hook인 Effect Hook을 제공한다.

🦋 useEffect

  • useEffect(함수)
  • 첫번째 인자는 함수이다. 이 함수안에서 side effect를 실행하면 된다.
  • 이 함수는
  • 컴포넌트 생성 후 처음화면에 렌더링
  • 컴포넌트에 새로운 props가 전달되며 렌더링
  • 컴포넌트에 상태가 바뀌면 렌더링
  • 이처럼 새롭게 컴포넌트가 렌더링될때 Effect Hook이 실행된다.
  • Hook을 쓸 때 주의할점
  • 최상위에서만 Hook을 호출합니다.
  • React 함수 내에서 Hook을 호출합니다.

💡 조건부 effect 발생

  • useEffect 두번째 인자는 배열이다.
  • 배열은 조건을 담고있는데, 이 조건은 boolean이 아닌, 어떤 값의 변경이 일어날때를 의미함
  • 따라서 해당배열엔 어떤 값의 목록이 들어간다.
  • 이 배열을 특별히 종속성 배열이라고 부른다.
  • 세가지 상태가 있다치자
  • filter가 변할때만 effect함수가 실행된다.
  • 한편, 카운트 올리는 버튼은 컴포넌트 상태가 바뀌고 업데이트되지만, 아무리 버튼을 눌러도 effect함수는 실행이 안됨
  • 왜냐하면, 종속성배열에는 filter만 존재하고, count는 존재하지 않기 때문
  • useEffect(함수, [종속성1,종속성2,...])
  • 두번째 인자는 종속성배열임. 배열내의 종속성1혹은2의 값이 변할 때, 첫번째 인자인 함수가 실행됨
  • 즉 두번째인자 배열내 값이 변할때만 첫번째인자 함수가 실행됨

🦋 단 한번만 실행되는 Effect 함수

  • 만일 종속성 목록에 아무 종속성도 없는, 즉 useEffect(함수,빈배열)과 같다면 컴포넌트가 처음 생성될때만 effect함수가 실행됨.
  • 이건 처음 단한번 API를 통해 리소스를 받아오고 더이상 API 호출이 필요없을때 사용할수 있다.
  • useEffect(함수) 형태는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태가 업데이트될때 effect함수가 실행된다.

🦋 Data Fetching

  • 필터링 예제 다시보기
  • 목록 내 필터링을 구현하기 위해서는 두가지 접근이 있을 수 있다.
  1. 컴포넌트 내 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter하는 방법
  2. 컴포넌트 외부에서 필터링 : 컴포넌트 외부로 api요청을 할 때, 필터링한 결과를 받아오는 방법(보통, 서버에 매번 검색어와 함께 요청하는 경우)
  • ajax요청이 느릴경우 => 로딩화면을 구현해야함(상태처리 필요)
  • React에서 Ajax요청을 처리할 때 SideEffect를 최소화하기 위해 EffectHook을 사용함.

🦋 실시간 요약

  • 구조분해할당
  • props > props.onSearch 로 쓰지않고 구조분해할당으로 {onSearch}로 전달할수도 있음. 이걸 권장함

promise fetch로 하는법

  • fetch => 프로미스 객체를 리턴함
  • fetch('https://koreanjson.com/post/1'); > promise{pending}
  • 이 객체 안의 PromiseResult : response 값을 꺼내오는게 중요
  • .then과 await가 있음
  • 방법1. then접근
  • fetch('https://koreanjson.com/post/1').then((res) => console.log(res)); //res 이자리에 response값이 알아서 들어옴
  • 여기서 then도 프로미스 객체를 리턴함
  • fetch('https://koreanjson.com/post/1').then((res) => res); then안에서 리턴하면 또 promise{pending} 이 리턴됨
  • 방법2. await접근
  • await fetch('https://koreanjson.com/post/1') 는 response를 한번에 리턴함.
  • 프로미스가 뭘 리턴하는지..
  • react 18을 공부하는게 어설프게 여러개 공부하는것보다 낫지않나.. 공부해서 프로젝트에 녹여내는게 좋을듯

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN