React, 하위로 정보를 전달하자 , props / 컴포넌트의 종속관계

props?

 

컴포넌트에 임의의 프로퍼티와 값을 지정하여 객체 형태로 전달.

매개변수의 참조를 통해 컴포넌트의 프로퍼티를 필드형식으로 참조가능.

 

<TestReact value1='1' />

TestReact 라는 컴포넌트를 실행할건데 , value에 1이라고 지정할게.

function TestReact(props) {
    return <h1>테스트 {props.value1}</h1>;
}

매개변수로 객체를 전달받아 , 실행에서의 props.value1 의 형태를 볼 수 있다.

 

 props 의 구조분해 할당

 

이전의 객체의 구조분해 할당 케이스를 보았다.

프로퍼티와 변수명이 같다면 , 변수에 프로퍼티의 값이 할당되는 개념이였다.

• case 1

 

 function TestReact({value1, value2}) {
     return (
         <div>
             <h1>테스트 {value1}</h1 >
             <h2>테스트 {value2}</h2 >
         </div>
     );
 }

 root.render(
     <TestReact value1='1' value2='2' />
);

TestReact 라는 컴포넌트를 실행할것인데 ,

사용자 임의의 value1 프로퍼티와 value2 프로퍼티값을 지정하였고,

매개변수를 사용할 시 , 구조분해 할당을 이용하여 변수값이 객체의 프로퍼티값과 같기에 ,

변수에 값을 할당 받았다.

{value1, value2} 는 변수임에 주의.

 

• case2

import Hello from './Hello';

function App() {
  return (
    <Hello students="학생여러분!!" color="blue" />
  );
}

export default App;

 

function Hello({ students, color }) {

    return <div style={{ color: 'blue' }}>안녕하세요 {students}</div>;

    // return <div style={{ color : color }}>안녕하세요 {students}</div>;
    /* 속성과 값의 형식명이 동일하므로 단축 문법으로 표현 */
    // return <div style={{ color }}>안녕하세요 {students}</div>;
}

export default Hello;

Hello 라는 컴포넌트를 실행시키면서 students 와 color를 프롭스형태로 전송.

구조분해 할당을 통해 변수로 할당.

style 지정시 style={} 의 형태로 사용되는데 ,

내부적으로 객체의 형태를 지니기 때문에 중괄호가 두개가 발생한다.

속성과 값의 형식이 동일하면 단축문법이 사용가능함으로 , 주석과 같이

return <div style={{ color : color }}>안녕하세요 {students}</div>;
return <div style={{ color }}>안녕하세요 {students}</div>;

이렇게도 표기가 가능하다.

 

 

 

구조분해 할당 받지 않고 , 매개변수를 통해 객체 전체를 참조받아 , 멤버연산자 (.)을 통해

참조 가능.

 

 상단의 케이스에서 볼 수 있었지만 , 추가적으로 보겠다.

import Hello from './Hello';

function App() {
  return (

    <Hello students="학생여러분!!" />
    
  );
}

export default App;

/* 
    props 는 관례상 명칭에 불과.
*/
function Hello(props) {
    return <div>안녕하세요 {props.students}</div>;
}

export default Hello;

---

---

컴포넌트 간의 종속관계

모듈간 종속.

import Parent from "./Parent";

function App() {
return (
<Parent parentName="김종민"/>
);
}

export default App;

import Son from "./Son";

export default function Parent({ parentName }) {
    return (
        <>
            <div>나의 아빠는 {parentName}입니다</div>
            <Son sonName="홍길동"/>
        </>
    );
}

export default function Son({ sonName }) {
    return (
        <div>나의 이름은 {sonName}입니다.</div>
    );
}

app 에서 Parent 컴포넌트를 수입하고 , Parent 컴포넌트에서 Son 을 수입하며

타고 타고 들어가는 구조를 지녔다.

컴포넌트의 관계가 트리구조처럼 종속되어 연결되어있음을 확인 할 수 있다.

 

컴포넌트 태그간 종속관계(props.chidren)

 

설명을 하기전에 구조를 먼저 한번 살펴보겠다.

import Parent from "./Parent";
import Son from "./Son";

function App() {

    return (
        <Parent parentName="박성연" >
          <Son sonName="홍길동"/>
        </Parent>
    );
}

export default App;

app 에서 명시적으로 컴포넌트의 계층구조를 

마치 , HTML의 부모 자식관계처럼 명시적으로 표현하였다.

이는 , HTML의 부모자식관계 와 동일선상으로 이해하면 곤란하다.

컴포넌트간의 계층구조를 표현하였을 뿐이지, HTML태그 관계로 이해하면 안된다.

export default function Parent({ parentName, children }) {
    return (
        <>
            <div>나의 아빠는 {parentName}입니다</div>
            {children}
        </>
    );
}

// export default function Parent(p) {
//     return (
//         <>
//             <div>나의 아빠는 {p.parentName}입니다</div>
//             {p.children}
//         </>
//     );
// }

export default function Son({ sonName }) {
    return (
        <div>나의 이름은 {sonName}입니다.</div>
    );
}

 

Parent에서 종속된 값을 가져오기 위해서 chidren 이라는 필드명을 통해 받아온다.

chidren의 표현으로 인해 , 하위컴포넌트의 위치를 표시 할 수 있다.

app에서 명시된 컴포넌트의 계층구조로 인하여 

Parent에서 Son을 따로 import 하지 않아도 된다.

 

주석처리와 같이, 객체 자체를 받아와서 구조분해할당 하지 않은 상태로 표기하는 것도 가능하다.

 

 

나는 개인적으로 태그 종속관계가 HTML태그와 혼동이 많이 와서 조금 힘들었다.

단지 우리는 리턴하고있는 함수의 종속관계를 명시하는것이지,

html의 구조가 그렇다는 것이 아닌데..

html 의 구조는 return의 chidren을 통해 명시하고 있기 때문에

이부분에 대한 이해는 조금 어려웠다.

그리고 chidren 말고 다른 이름을 쓰는건 안되는것도 부딪혀 보고 알았다.

 

"1을 1이라고하지 왜 2를 해보려고해요 ?"

"그러게 나는 왜 2가 해보고 싶지?"

 

구조분해할당도 사실 나에게 너무 어려웠던 개념인데,

정리를 하면서 조금 적응이 되고 , 아 이래서 구조분해 할당을 썼구나.

싶지만, 리액트의 문법은 아직 나에게 조금 어렵다.

자주 에러의 빨간 화면을 보지만 이 또한 지나가리.