github-blog.png


✍️ Today I Learned


1. React 데이터 흐름

react



1-1. 상향식(bottom-up) 개발

  • React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다.

    앱을 만들거나 웹페이지를 만들때 페이지를 만들기 이전에 컴포넌트를 만들고 조립을한다.

    즉, 상향식(bottom-up) 으로 앱을 만드는 것이다.

    이러한 구조의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다.이때 중요한점은 하나의 컴포넌트는 한가지 일만 하는 단일 책임 원칙을 따르는 것이다.

    그래야 이후 오류 발생시 오류 컴포넌트를 쉽게 찾고 수정할 수 있다.

    이러한 흐름을 이해하였다면, 웹페이지나 앱 디자인을 전달 받았을때 React 개발자는 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다.



1-2. 하향식(top-down) 데이터 흐름

  • 단방향 데이터 흐름(one-way data flow) 이라는 키워드는 React를 대표하는 키워드이다.

    컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.

    즉, 데이터를 전달하는 주체는 부모 컴포넌트가 되며, 이는 데이터 흐름이 하향식(top-down)임을 의미한다. 또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다는 특징들이 단방향 데이터 흐름(one-way data flow)이다.



1-3. 데이터 흐름을 고려한 State 배치

  • 앞서 state에 관하여 학습했지만 데이터 흐름에 포커스를 맞춰 다시 언급하자면, App 에서 필요한 데이터는 ‘변하는 값’과 ‘변하지 않는 값’ 두 가지로 나누어볼 수 있다.

    예를들어 user 가 입력하는 값은 이벤트에 따라 얼마든 변할 수 있는 값이며, 이 것을 state (상태) 라고 한다.

    React 로 개발을 할 때에 모든 데이터를 state 로 둘 필요는 없다.

    사실 state 가 많아질 수록 앱이 복잡해지기 때문에 state 는 최소화 될 수록 좋다. 어떤 데이터를 state 로 두어야 하는지 여부는 다음 세 가지의 질문을 통해 판단해볼 수 있다.

    1. 부모 컴포넌트 props 를 통해 전달되는가?

    2. 시간이 지나도 변하지 않는가?

    3. 컴포넌트 안의 다른 state 또는 props 를 가지고 계산이 가능한가?

    ‘아니오’ 라는 답변이 나온다면 해당 데이터는 state 로 두어야 할 필요가 있다.

    그렇다면 state 를 어디에 위치시켜야 데이터 흐름에 알맞은가?

    만일 state 가 특정 컴포넌트 안에서만 유의미하다면 그 컴포넌트 에 위치시키면 되지만, 하나의 state 를 기반으로 두 컴포넌트가 영향을 받는다면, 공통 소유 컴포넌트를 찾아 해당 위치에 state 를 위치시켜야 한다.

    즉, 두 개의 자식 컴포넌트가 하나의 state 에 접근하고자 할 때에는 하향식(top-down), 단방향 데이터 흐름을 고려하여 두 자식 컴포넌트의 공통된 부모 컴포넌트에 state 를 위치시켜야 한다.



1-4. State 끌어올리기 (Lifting State Up)

State 끌어올리기 (Lifting State Up)

  • 지금까지 단방향 데이터 흐름(one-way data flow)이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달만 받을 수 있었다.

    또한 전달 받은 값의 형태 혹은 타입이 무엇인지만 알 수 있었다.

    그러므로 State 끌어올리기 (Lifting State Up) 가 발생되어 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 “역방향 데이터 흐름”과 같이 조금 이상하게 들릴 수 있다.

    React가 제시하는 해결책은 다음과 같다.

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

    함수의 작성은 부모 컴포넌트에서 이뤄지며 props로 사용은 자녀 컴포넌트에서 이루어진다.

    여전히 단방향 데이터 흐름에 원칙에 부합하지만, 하위 컴포넌트에서 상위 컴포넌트의 상태를 변경할 수 있게 된다. 바로 이것이 State 끌어올리기 (Lifting State Up)이다.



2. Effect Hook



2-1. useEffect()

  • useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

    렌더링은 컴포넌트가 mount되었을 때, update되었을 때 나타난다. 해당 시점에 특정 작업을 처리 할 수 있는 함수이다.

    즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서 사용할 수 있게 된다.

    생명주기

  • useEffect의 기본형은 useEffect( function, deps )이다.

    function은 수행하고자 하는 작업이며, deps는 배열형태를 전달받는다. 해당 배열안에는 검사하고자 하는 특정 값 혹은 빈 배열이 들어간다.

    deps의 값에 따라 useEffect() 함수의 실행 횟수가 결정된다. []을 넣는 경우 한번만 실행이되며, 특정 값이 업데이트( 특정 props, state가 바뀔 때) 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

    이러한 특성 때문에 deps에 들어간 배열은 종속 배열, 의존성 배열(dependency Arr) 등으로 부르기도 한다.

    또한 deps파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 useEffect() 함수가 호출되므로 주의해야 한다.



3. 실습



3-1. State 끌어올리기 (Lifting State Up) 다이어그램

상태끌어올리기

🤔 Understanding

  • useEffect().. 아직 감이 안잡힌다. 컴포넌트가 렌더링 될때마다 특정 함수가 작동되는 경우 사용이 되어야 한다 일단 학습하였다.

    실습에서도 AJAX로 가져온 데이터 값을 condition.destination 즉, 도착지를 입력하며 새로 렌더링 하였다.

    우선 사용목적은 감은 오지만 실제 코드에 적용하기까진 시간이 필요할 듯하다.