[React] props를 통해 컴포넌트에게 값 전달하기

🍫 이번 시간에는 props를 통해 컴포넌트에게 값을 전달하는 법, 그리고 children에 대해 알아보겠다.

 

🍫 props란?

properties의 줄임말

컴포넌트를 사용하게 될 때 특정 값을 전달해주고 싶을 때 사용하는 것

 

🍫props를 이용해서 컴포넌트에 값 전달하기

function App() {

  return (

    <Hello name="react"/>

  );

}

App 컴포넌트에서 Hello 컴포넌트에 name이라는 것을 전달해주고 싶다면 이렇게 작성하면 된다.

 

🍫 전달받은 props를 컴포넌트에서 사용하기

function Hello(props){

    console.log(props)

    return <div>Hello!</div>;

}

Hello 컴포넌트에서 props를 사용하고 싶다면 인자로 props를 넣어주면 된다. props를 콘솔로 확인해보면 다음과 같다.

 

 

function Hello(props){

    console.log(props)

    return <div>Hello! {props.name}</div>;

}

props 안에 있는 name을 JSX에서 사용하고 싶다면 {props.name}이라고 사용하면 된다.

 

function Hello({name}){

    return <div>Hello! {name}</div>;

}

더 간단히 사용하고 싶다면 ES6 문법의 객체 비구조화 할당을 이용하여 위와 같이 사용할 수도 있다.

 

function App() {

  return (

    <Hello name="react" color="red"/>

  );

}

function Hello({name,color}){

    return <div style={{color}}>Hello! {name}</div>;

}

color라는 props를 작성하고 color안에 들어있는 것으로 스타일을 바꾸고 싶다면 위와 같이 작성한다. {} 중괄호를 두번 써준 이유는 , 하나는 JSX에서 인라인으로 스타일을 지정하고 싶다면 객체로 넣어줘야 하기 때문에 쓴 것이고, 다른 하나는 그게 자바스크립트 값이기 때문에 써준 것이다.

(color: color인데 ES6 문법에서 키와 값이 같으면 하나만 써주어도 되기 때문에 위와 같이 작성할 수 있다.)

 

🍫 props가 생략되었을 때 기본 값을 설정하고 싶다면? - defaultProps

만약 특정 props를 빠뜨렸을 때 기본적으로 사용할 값을 defaultProps를 이용해서 설정할 수 있다.

function App() {

  return (

    <>

      <Hello name="react" color="red"/>

      <Hello color="blue"/>

    </>

  );

}

위와 같이 name이 생략된채로 Hello 컴포넌트를 사용했다.

우리는 name이라는 props가 없다면 'unknown'을 쓰고 싶다.

 

function Hello({name,color}){

    return <div style={{color}}>{name}님 안녕하세요.</div>;

}

Hello.defaultProps = {

    name: 'Unknown'

};

이렇게 defaultProps를 이용해서 props가 없을 때 기본 값을 설정할 수 있다.

 

🍫props children

우선 새로운 컴포넌트를 만든다. Wrapper.js

function Wrapper(){

    const style = {

        border: '2px solid black',

        padding: 16

    }

    return(

        <div style={style}>

        </div>

    )

}

✅Wrapper.js

 

function App() {

  return (

    <Wrapper>

      <Hello name="react" color="red"/>

      <Hello color="blue"/>

    </Wrapper>

  );

}

App 컴포넌트에서 Wrapper를 Hello 컴포넌트 두 개를 감싸도록 작성했다.

 

실행 결과를 보면, 분명히 Hello 컴포넌트 2개를 렌더링하고 있음에도 불구하고 Wrapper만 보인다.

 

이럴때 children이라는 props를 사용한다.

 

function Wrapper({children}){

    const style = {

        border: '2px solid black',

        padding: 16

    }

    return(

        <div style={style}>{children}</div>

    )

}

부모에 해당하는 컴포넌트에서 children이라는 props를 인자로 받아서, 렌더링해주면 된다.