[React] Props에 대하여/프롭 정리

Props에 대하여

 

React에서 Props는 컴포넌트 간에 데이터를 전달하는 방법이다. 리액트에서는 기본적으로 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 사용한다.

 

Props를 사용하는 방법

 

Props를 사용하려면, 컴포넌트의 속성으로 Props를 넘겨줘야 한다. 다음은 Props를 사용하는 기본적인 방법이다.

예시:

import {Hello} from './Hello'

function App() {
  const names = ['Bill', 'Chichi', 'Mina'];
  return (
    <>
      <Hello name={names}></Hello>
    </>
  )
}

 

export function Hello(props){

    console.log(props.name);
    return(
        <h1>
            {props.name}
        </h1>
    )
}

 

위 예제를 보면 상위 컴포넌트 App에서 하위 컴포넌트인 Hello로 names배열을 name이라는 키값으로 프롭으로 전달한다. 하위 컴포넌트에서는 파라미터에서 name 키값을 이용하여 names 배열에 접근 할 수 있게 된다.

 

console.log의 결과는 아래와 같다.

 

구조 분해 할당으로 사용

 

프롭으로 넘겨지는 값은 키-벨류 값을 가지는 객체로 넘겨진다. 즉, 프롭으로 넘겨지는 값이 여러개 일 경우 각 값은 킷값으로 구별된다는 것이다.

 

따라서 자바스크립트에서 기본적으로 지원하는 구조분해 할당 역시 사용이 가능하다. 즉 위의 코드는 아래와 같이 변경될 수 있다.

 

export function Hello({name  = "no name"}){

    return(
        <h1>
            {name}
        </h1>
    )
}

 

결과는 같다. 다만 위의 예제에서는 default value를 적용하여 만약 name의 값이 없을 경우에는 no name이라는 String이 name에 할당된다.

 

현재 구조분해 할당 된 name은 배열이다. 그러므로 아래의 형태로 각각 h1을 적용하여 표시할 수도 있다.

 

export function Hello({name}){

    const arr = [];
    for(let n of name){
        arr.push(
            <h1>
                {n}
            </h1>
        )
    }

    return(
       <>
        {arr}
       </>
    )
}

*String 타입이 아닌 프롭은 값에 {}을 사용하여 하위 컴포넌트로 넘겨준다.

*String 타입의 경우 값에 “”를 사용하여 하위 컴포넌트로 값을 넘겨준다.

*변는 기본적으로 {}를 사용한다. {}내부는 자바스크립트 코드를 의미한다!