[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션 - 30강 React props, 조건부 렌더링

props

props란?

properties의 준말이다. 컴포넌트를 사용하게 될 때 특정 값을 전달해야하는 상황이 생기는데 이때 props를 사용한다. 아래 코드로 한번 확인해보자. 먼저 App.js를 아래와 같이 고쳐본다.

컴포넌트 밖에서 props 전달하기

App.js

import React from 'react';
import Hello from './Hello' 

function App() {
  return(
    <Hello name='유보미' color='red'/>
  )
}

export default App;

여기서 보면 Hello라는 컴포넌트를 불러오는 jsx안에서 name와 color라는 props를 준 것을 볼 수 있다. 이런 형태로 Hello.js에게 props를 던져준다. 그럼 Hello에서는 받아온 props를 어떻게 사용할까? 이번엔 우리가 만들었던 Hello.js를 아래와 같이 수정해보자.

컴포넌트안에서 props 받아오기

Hello.js

import React from 'react';

function Hello(props){ 
return (
    <>
        <div>안녕하세요 {props.name}입니다.</div>  
        <div style=>내가 좋아하는 컬러는 {props.color}입니다.</div>
    </>
    ) 
}

export default Hello; 

위와 같이 App.js안의 Hello컴포넌트에서 보내준 props들을 Hello안에서는 위와 같은 {props.name} 이런 방식으로 가져온다. 이들은 javascript이므로 중괄호를 감싼 뒤 불러와야 하고 위의 style에서의 예시처럼 객체 안에서도 사용할 수 있다. (style에서 첫 중괄호는 javascript를 사용한다는 중괄호, 두번째 중괄호는 객체의 중괄호.)

컴포넌트 안에서 props를 객체구조분해 형태로 가져오기

Hello.js

import React from 'react';

function Hello({color, name}){ 
return (
    <>
        <div>안녕하세요 {name}입니다.</div>  
        <div style=>내가 좋아하는 컬러는 {color}입니다.</div>
    </>
    ) 
}
export default Hello; 

이런식으로 컴포넌트 안에서 props를 받아올때 객체구조분해를 사용해서 받아오면 훨씬 직관적이고 깔끔한 코드를 작성할 수 있다. 불필요한 ‘props.’을 매번 안써줘도 되니까 깨끗하다. 그리고 더 대박인건 객체 안에서 color: color 이렇게 두번 중복되는 것은 그냥 color 한번만써줘도 똑같이 작동된다. props의 이름을 지을때 객체의 prop명과 맞춰주면 한번만 써줘도 되는 것이다. (개인적으로는 너무 축약적이라 헷갈릴거 같아서 나중부터 적용해보도록 하려고한다.)

props가 없을때 기본값 설정하기

너무 간단하다. 리액트 진짜 좋은 것. 하단에 그냥 Hello.defaultProps의 객체로 선언해서 props에 대한 default값을 설정해주기만 하면 된다.

Hello.js

import React from 'react';

function Hello({color, name}){ 
const style = { //객체는 변수로 따로 빼서 선언해보았다. 
    color: color,
    paddingBottom: 20
}
return (
    <>
        <div>안녕하세요 {name}입니다.</div>  
        <div style={style}>내가 좋아하는 컬러는 {color}입니다.</div>
    </>
    ) 
}
Hello.defaultProps = { //props가 빈값일때 아래의 default를 가져온다
    name: '이름없음',
    color: 'blue'
}

export default Hello; 

그리고 App.js에는 이렇게 테스트를 해보자.

App.js

import React from 'react';
import Hello from './Hello' 

function App() {
  return(
    <>
      <Hello name='유보미' color='red'/>
      <Hello color='red'/>
      <Hello name='유보아'/>
    </>
  )
}

export default App;

아래와 같은 결과값을 볼 수 있을 것이다.

props.children

아래와 같이 Wrapper 컴포넌트를 하나 만들어보자. 이는 우리가 만든 Hello를 감싸줄 wrapper이다. 여기에 스타일로 보더와 패딩을 주었다.

Wrapper.js

import React from 'react';

function Wrapper(){
  const style = {
    border: '2px solid #000',
    padding: 16
  }
  return(
    <div style={style}></div>
  );
}

export default Wrapper;

그리고 App.js로 돌아와서 Wrapper를 import시켜보자.

App.js

import React from 'react';
import Hello from './Hello' ;
import Wrapper from './Wrapper';

function App() {
  return(
    <Wrapper>
      <Hello name='유보미' color='red'/>
      <Hello color='red'/>
      <Hello name='유보아'/>
    </Wrapper>
  )
}

export default App;

자, 이와같이 했을때 아까 우리가 만든 Hello화면 밖에 Wrapper로 감싸져 있을 것을 예상한다. 하지만 보여지는 화면은 아래와 같다.

이럴때 props.children을 사용해줄 수 있다.
다시 Wrapper로 돌아가서 아래와 같이 작성해준다.

Wrapper.js

import React from 'react';

function Wrapper(props){
  const style = {
    border: '2px solid #000',
    padding: 16
  }
  return(
    <div style={style}>
      {props.children}
    </div>
  );
}

export default Wrapper;

이렇게 props를 받아오고 props.children을 사용해서 불러와 줄 수 있다.
이는 또 아래와 같이 객체구조분해로도 사용할 수 있다.

Wrapper.js

import React from 'react';

function Wrapper({ children }){
  const style = {
    border: '2px solid #000',
    padding: 16
  }
  return(
    <div style={style}>
      {children}
    </div>
  );
}

export default Wrapper;

모두 똑같이 아래와 같은 화면을 반환하는 걸 볼 수 있을 것이다.

조건부 렌더링

조건부 렌더링이란?

특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미힌다. 먼저 App.js에서 아래와 같이 써보자.

App.js

import React from 'react';
import Hello from './Hello' ;
import Wrapper from './Wrapper';

function App() {
  return(
    <Wrapper>
      <Hello
      //isSpecial이란 props추가
       name='유보미' color='red' isSpecial={true}/> 
      <Hello color='red' isSpecial={false}/>
      <Hello name='유보아'/>
    </Wrapper>
  )
}

export default App;

Hello안에 isSpecial이라는 props를 추가했다. 그리고 Hello로 가서 조건별로 렌더링 할 내용을 만들어줘보자.

Hello.js

import React from 'react';

function Hello({color, name, isSpscial}){ 
const style = {
    color: color,
    paddingBottom: 20
}
return (
    <>
        <div>안녕하세요 {name}입니다.</div>  
        <div style={style}>내가 좋아하는 컬러는 {color}입니다.
            {isSpecial ? <div>진짜예요!</div> : <div>농담이에요</div>}
        </div>
    </>
    ) 
}
Hello.defaultProps = {
    name: '이름없음',
    color: 'blue'
}

export default Hello; 

isSpecial을 삼항연산자를 사용해 참일때는 ? 뒤를 불러오고 거짓일때는 : 뒤를 불러오게끔 만들어줬다. 만약에 false일 경우는 없고 참값만 보낸다면 저부분은

{isSpecial ? <div>진짜예요!</div> : null}
{isSpecial && <div>진짜예요!</div>}

이렇게 각각 바꿔서 써줘도 된다. 삼항연산자 대신에 and연산자를 써주는게 더 깔끔해보인다. 만약 false만 설정한다면 or연산자 ||를 써주면 되겠다.
또한 null대신에 falsy한 값으로 undefined나, false를 써줘도 되는데 0은 텍스트를 그대로 반환해버리니 0은 쓰지말자. 그리고 또 아래와 같이 isSpecial에서도

<Hello isSpecial={true}/>
<Hello isSpecial/>

둘은 같은 의미이다. 이런 특징이 있다는걸 잘 알아두도록 하자! 오늘은 여기까지..
시청 영상 30강 6~7까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp