[React] Props

Props

Definition

• 컴포넌트 속성을 설정할 때 사용하는 요소
• Properties의 줄임말로, 부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달할 때 사용하는 단일 객체
• 전달된 후에는 변수를 통해 접근이 가능함
• HTML요소는 속성을 가지고 있고, React 컴포넌트는 props를 가지고 있다.
• prop="value" (HTML 속성과 동일한 구문)

특징

• 단방향unidirectional (부모→자식)
• readonly
• defaultProps : 기본값 설정

  Hello.defaultProps = { name: '이름없음' }

• props.children : 태그 사이의 내용을 보여줌

  <MyComponent>리액트</MyComponent> // '리액트' 부분

• 비구조화할당(구조분해할당)
  • 참고 : 구조 분해 할당

    var a, b, rest;
    [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20
    
    [a, b, ...rest] = [10, 20, 30, 40, 50];
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // [30, 40, 50]
    
    ({ a, b } = { a: 10, b: 20 });
    console.log(a); // 10
    console.log(b); // 20
    
    
    // Stage 4(finished) proposal
    ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // {c: 30, d: 40}

 

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

https://thebook.io/080203/ch03/03/05-01/

리액트를 다루는 기술 [개정판]: 3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 - 1