[회고 : 24.02.11] 리액트 props 구조 분해 할당

프론트 개발을 리액트로 해보고 싶어서 공부 중이다.
아직 시행착오가 많지만 언젠간 익숙해지지 않을까?!

 

구조 분해 할당이란?

 

기존 props 할당 -> 자식 컴포넌트에서 props를 받을 때 하나의 오브젝트로 받아 사용

function Todo(props){
    return <div>{props.todo}</div>
}

 

자바스크립트의 구조 분해 할당을 이용 

function Todo({ title, body, isDone, id }){
    return <div>{title}</div>
}

 

 

회고

temp라는 오브젝트를 만들어 오브젝트로 넘기면 알아서 구조 분해가 되서 할당될 줄 알았는데 그건 나의 욕심이였나보다... 

import React from 'react'
import Layout from 'Layout';
import Child from 'Child';

function App() {
  const temp = {
    name : '홍길동',
    age : 15
  }

  return <Child temp = {temp}></Child>;
};

export default App

 

 

아래와 같이 키를 나눠줘야지 할당이 가능하다.

import React from 'react'
import Layout from 'Layout';
import Child from 'Child';

function App() {
  const temp = {
    name : '홍길동',
    age : 15
  }

  return <Child name = {temp.name} age = {temp.age}></Child>;
};

export default App