props와 조건부 랜더링

jaemin·2020년 12월 4일
0

리액트

목록 보기
2/16
post-thumbnail

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

props란, properties의 줄임말이다. props는 우리가 컴포넌트를 사용할 때 특정 값을 전달해주고 싶을 때 사용한다.

코드를 통해 이해해보자.

App.js로 들어와보자. 만약 우리가 Hello 컴포넌트에게 name이라는 값을 전달해주고 싶다고 가정해보자.

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

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

name="react"이라고 작성한 후 Hello 컴포넌트를 열어보자.

Hello 함수에서 props라는 파라미터를 설정해준다. 이 props 파라미터에는 우리가 넣어준 값들이 객체 형태로 들어가 있다.

import React from 'react';

function Hello(props) {
  return <div>안녕하세요</div>;
}

export default Hello;

Hello 함수에서 콘솔로 props를 찍어보면 다음과 같이 나온다.

스크린샷 2020-12-04 오후 12 33 53

그러면 props 값을 JSX 내부에서 랜더링하고 싶다면 앞서 배운 것처럼 중괄호로 감싸주면 된다.

import React from 'react';

function Hello(props) {
  return <div style={{
      color: props.color
    }}>안녕하세요 {props.name}</div>;
}

export default Hello;

여기서 style={{}} 이라고 중괄호가 두개가 사용되었는데 이를 혼동하면 안된다. 제일 바깥 중괄호는 이 값이 자바스크립트에서 가져오는 값이다 라는 것을 말하고 있고 그 안의 중괄호는 객체를 뜻하는 중괄호를 말한다.

또, 여기서 props.color, props.name 같이 props가 반복적으로 사용되고 있다. 자바스크립트의 디스트럭처링 할당을 통해 간단하게 표현할 수 있다.

import React from 'react';

function Hello({color, name}) {
  return <div style={{
      // color : color는 color로 줄여서 쓸 수 있다.
      color:color
    }}>안녕하세요 {name}</div>;
}

export default Hello;

props를 설정하지 않았을 때 기본값 설정하는 방법

만약에 우리가 App.js에서 name 값을 빼먹었다고 가정하자. 이때, 기본값을 '이름없음'으로 설정하고 싶다.

이 경우, Hello.js를 열어보자.

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

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

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

export default Hello;

defaultProps를 통해 기본값을 설정해주었다. 기본값이 잘 설정되었는지 확인하기 위해 App.js로 돌어오자.

// App.js
function App() {
	return (
  	<>
    	<Hello name="react" color="red"/>
    	<Hello color="pink"/>
    </>
  );
}

결과 :

스크린샷 2020-12-04 오후 12 55 02

기본값이 잘 설정된 것을 알 수 있다.

props.children

<Hello>어쩌구저쩌구</Hello>

props.children은 컴포넌트 안의 값을 조회하기 위해 사용한다.

일단 wrapper라는 컴포넌트를 만들어보자. (wrapper.js 파일을 생성한다.)

// wrapper.js
import React from 'react';

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

export default wrapper;

이제 App.js에서 사용해보자.

// App.js
import wrapper from './wrapper';

function App() {
  	return (
    	<wrapper>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </wrapper>
    );
};

이렇게 작성하고 wrapper 컴포넌트를 열어보면 다음과 같이 나온다.

스크린샷 2020-12-04 오후 1 25 11

App.js에서 Wrapper 컴포넌트 안에 Hello 컴포넌트 두 개가 랜더링되지 않고 있다. 만약에 브라우저에서 보여주고 싶다면 props.children을 사용하면 된다.

// Wrapper.js
function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: 16
  };

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

조건부 랜더링

리액트에서 조건에 따라 랜더링하는 방법을 배워보도록 하자.

Hello 컴포넌트를 이용해서 조건부 랜더링을 어떻게 하는지 알아보자.

// App.js
function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpeacial={true} />
      <Hello color="pink" />
    </Wrapper>
  );
}

isSpecial 이라는 props를 설정해준다. true, false 또한 자바스크립트의 값이기 때문에 중괄호로 감싸준다.

조건부 랜더링을 구현하는 가장 간단한 방법은 삼항 조건 연산자를 이용하는 것이다.

// Hello.js
function Hello({ color, name, isSpecial }) {
 return (
   <div style={{
    color
  }}>
     { isSpecial ? <b>*</b> : null }
     안녕하세요 {name}
   </div>
  ); 
}

isSpecial 값이 참이면 *을 덧붙이고 값이 거짓이라면 null 이 들어간다.

참고로 JSX에서 null, false, undefinedf를 랜더링하면 아무것도 나타나지 않는데, 반면 falsy한 값인 0을 랜더링하면 그대로 숫자 0이 나타난다.

그런데, 이 경우에는 삼항 조건 연산자보다 &&연산자를 이용하는게 코드가 더 간단해진다.

// Hello.js
function Hello({ color, name, isSpecial }) {
 return (
   <div style={{
    color
  }}>
     { isSpecial && <b>*</b> }
     안녕하세요 {name}
   </div>
  ); 
}

이 경우는 isSpecial이 참일 때만 텍스트를 보여줘서 &&연산자를 사용했지만, 참 거짓에 따라 서로 다른 텍스트를 보여주는 경우에는 삼항 조건 연산자를 사용해야 한다.

한가지 팁

값이 true, false인 props를 설정할 때, 값을 생략한다면 암묵적으로 true로 설정이 된다.

// App.js
function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpeacial />
      <Hello color="pink" />
    </Wrapper>
  );
}

isSpeacial의 값을 생략하면 자동으로 true라고 설정된다.

profile
프론트엔드 개발자가 되기 위해 공부 중입니다.

0개의 댓글