[React] #4. 리액트의 컴포넌트 - 2

하위 컴포넌트의 뎁스가 많아진다

만약 이런 구조의 컴포넌트가 있다고 가정해 보자.

let [value, changeValue] = useState("메롱!!") 
...
...
<Component1 value={value} />

function Component1(props){
    return (
        <Component2 value={props.value} />
    )
}

function Component2(props){
    return (
        <Component3 value={props.value}  />
    )
}

function Component3(props){
    return (
        <Component4 value={props.value}  />
    )
}

function Component4(props){
    return (
        <>
            {/* 드디어!! 출력!! */}
            <div>
            '    {props.value}
            </div>
        </>
    )
}

결국 < Component1 /> 은 "메롱!!" 을 출력하게 될 것이다. 부모 컴포넌트인 < Component1 />의 value의 상태(값)을 props 사용으로 < Component4 />까지 전송되었다. 근데 뭔가 많이 답답하다. 하위 컴포넌트를 거치면서 상태값이 변조되는 것도 아니고 그냥 값만 1에서 4로 전달하는 건데 너무 불공정한 사회다... 메롱!! 보려고 React의 state가 개고생을 했다.

전체적으로 고른 컴포넌트 설계가 필요하다.

이게 좀 어려운 일이긴 하다. 하위 컴포넌트를 최대 몇 뎁스까지 만들어야 할지 미리 정해놓고 가는것도 도움이 될것 같다. 예를 들자면 이렇다.

<인적정보>
    <기본정보>
        <가족사항>
            <가족>
                <이름></이름>
                <나이></나이>
                <관계></관계>
            </가족>
            ...
        </가족사항>
    </기본정보>
    <학력정보>
        <교육기관들>
            <교육기관>
                <기관명></교육기관>
                <입학년월></입학년월>
                <졸업년월></졸업년월>
            <교육기관>
        </교육기관들>
        ...
    </학력정보>
    
    <경력정보 />
    <기술정보 />
</인적정보>

위 노드대로 만들자면 아래와 같이 나오게 된다.

1. 인적정보
   1) 기본정보
   i. 가족사항
   - 가족정보
   ...
   2) 학력정보
   i. 교육기관 목록
   - 교육기관1
   - 교육기관2
   ...

UI는 저것보다 훨씬 복잡하게 나올수도 있지만 데이터를 어느 정도 정리할 수는 있다.

난 10뎁스까지 만들건데?

안돼... 그러지마

React Context API 란?

프로그램 전역 또는 리액트 상태(또는 값)을 활용할 범위를 설정하여 기본적인 props 사용법보다 폭넓게 관리가 가능하다.

사용 시작은 이렇게

1. useContext 라는 것이 필요하다. react 에서 그냥 가져와 쓰면 되니 추가하자.

import React, { useState, useContext }  from 'react';

2. Context를 App.js에 전역으로 선언한다.

let mContext = React.createContext();

3. 아무 변수나 상태값을 선언한다.

let [val, changeVal] = useState("!!!!");

4. 변수를 사용할 컨텍스트의 범위를 지정한다. < Information /> 컴포넌트라고 하겠다.

<mContext.Provider value={val}>
    <Infomation />
</mContext.Provider>

5. Information 컴포넌트를 아래와 같이 만든다. props 를 사용하는 방법과 똑같다.

function ProductInfo(props) {
  return (
    <div>
      {props.value}
    </div>
  )
}

뭔가 더 복잡한건 나뿐인가?

그렇게 보이지만 사실은 그렇지 않다. 여러번 props를 보내지 않아도 되고 사용할 컴포넌트에만 props 를 파라미터로 받아서 사용하면 된다.

컴포넌트, 상태(값) 설계의 중요성을 깨닫다

지금도 그렇고 앞으로도 계속 그럴 예정이다.

마치며

다음 포스팅에서는 리액트의 Redux 에 대하여 알아보겠다. 끝