[리액트 react] 컴포넌트의 속성을 지정하는 법 / Props

  Props

• JSX 문법에서 컴포넌트를 작성할 때 속성을 지정한 것.
• Properties의 약자
• 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.
• 컴포넌트를 활용할 때 속성값을 다양하게 전달하고 이 props 값을 활용하면, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수 있다.

// App.js

import Tooktak from './Tooktak';

function App() {
  return (
    <div>
      <Tooktak color="blue"/>
    </div>
  );
}

export default App;

 

위 코드에서 color와 같이 속성을 정해주는 것을 props라고 한다. (리액트에서는 속성이란 단어 대신 프롭이라고 말한다.)

App.js에서 전달한 프롭스를 Tooktak 컴포넌트에서 아래 코드처럼 사용한다.

// TookTak 컴포넌트

import tookImg from './assets/tooktak_image.svg';

function Tooktak(props) {
	console.log(props);
	return <img src={tookImg} alt="뚝딱 사진" />;
}

export default Tooktak;


// 결과
// {color: "blue"}

 

 

 

 

  props를 사용하여 이미지를 교체하는 방법

// Tooktak 컴포넌트

import blueImg from './assets/blue.svg';
import redImg from './assets/red.svg';

function Tooktak(props) {
	const tookImg = props == 'red' ? redImg : blueImg; // 조건 연산자 true : false
    return <img src={tookImg} alt="뚝딱 사진" />;
}

export default Tooktak;

조금 더 응용하면

// App.js

import Tooktak from './Tooktak';

function App() {
  return (
    <div>
      <Tooktak color="blue" num={2}/> // 숫자에 중괄호 사용한 거 체크
    </div>
  );
}

export default App;

// Tooktak 컴포넌트

import blueImg01 from './assets/blue-1.svg';
import blueImg02 from './assets/blue-2.svg';
import blueImg03 from './assets/blue-3.svg';
import blueImg04 from './assets/blue-4.svg';
import blueImg05 from './assets/blue-5.svg';
import redImg01 from './assets/red-1.svg';
import redImg02 from './assets/red-2.svg';
import redImg03 from './assets/red-3.svg';
import redImg04 from './assets/red-54.svg';
import redImg05 from './assets/red-5.svg';

const TOOK_IMAGES = {
	blue: [blueImg01, blueImg02, blueImg03, blueImg04, blueImg05],
    red: [redImg01, redImg02, redImg03, redImg04, redImg045
};

function Tooktak(props) {
	const src = TOOK_IMAGES[props.color][props.num - 1];
    const alt = `${porps.color}${props.num}`;
    return <img src={src} alt={alt} />;
}

export default Tooktak;

근데 위에 코드에서는 props라는 값을 반복적으로 너무 많이 사용하게 되니까 비효율적이다.

props가 객체 형태를 띠고 있으니 Destructuring 문법을 활용해서 조금 더 간결하게 아래처럼 코드를 작성하자.

// Tooktak 컴포넌트

import blueImg01 from './assets/blue-1.svg';
import blueImg02 from './assets/blue-2.svg';
import blueImg03 from './assets/blue-3.svg';
import blueImg04 from './assets/blue-4.svg';
import blueImg05 from './assets/blue-5.svg';
import redImg01 from './assets/red-1.svg';
import redImg02 from './assets/red-2.svg';
import redImg03 from './assets/red-3.svg';
import redImg04 from './assets/red-54.svg';
import redImg05 from './assets/red-5.svg';

const TOOK_IMAGES = {
	blue: [blueImg01, blueImg02, blueImg03, blueImg04, blueImg05],
    red: [redImg01, redImg02, redImg03, redImg04, redImg045
};

function Tooktak({ color, num }) {
	const src = TOOK_IMAGES[color][num - 1];
    const alt = `${color}${num}`;
    return <img src={src} alt={alt} />;
}

export default Tooktak;

그리고 코드를 작성하다가 props를 실수로 생략할 수도 있으니까 값 props의 기본 값을 정해주자.

// Tooktak 컴포넌트
// App.js에서 'num' props까지 만들어줬다 치고

import blueImg01 from './assets/blue-1.svg';
import blueImg02 from './assets/blue-2.svg';
import blueImg03 from './assets/blue-3.svg';
import blueImg04 from './assets/blue-4.svg';
import blueImg05 from './assets/blue-5.svg';
import redImg01 from './assets/red-1.svg';
import redImg02 from './assets/red-2.svg';
import redImg03 from './assets/red-3.svg';
import redImg04 from './assets/red-54.svg';
import redImg05 from './assets/red-5.svg';

const TOOK_IMAGES = {
	blue: [blueImg01, blueImg02, blueImg03, blueImg04, blueImg05],
    red: [redImg01, redImg02, redImg03, redImg04, redImg045
};

function Tooktak({ color = "blue", num = 1 }) {
	const src = TOOK_IMAGES[color][num - 1];
    const alt = `${color}${num}`;
    return <img src={src} alt={alt} />;
}

export default Tooktak;

 

 

 

 

 

  children

• 컴포넌트의 자식들을 값으로 받는 props.
• JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children에 담기게 된다.
• children을 활용하면 단순히 텍스트만 작성하는 걸 넘어서 여러가지 응용할 수 있다.
  (1) 컴포넌트 안에 컴포넌트 작성
  (2) 컴포넌트 안에 복잡한 태그들을 더 작성할 수 있음

 

이 코드는 children을 사용하기 전 코드이다.

// Button.js


function Button({ text }) {
	return <button>{text}></button>;
}

export default Button;

// App.js

import Tooktak from './Tooktak';
import Button from './Button';

function App() {
  return (
    <div>
		<div>
			<Button text="시작" />
			<Button text="처음부터" />
		</div>
		<Tooktak color="blue" num={2}/> // 숫자에 중괄호 사용한 거 체크
    </div>
  );
}

export default App;

단순히 보여주기만 할 값을 다룰 땐 아래 코드처럼 props를 만드는 것 보다는 children props를 만드는 게 효율적이다.

// Button.js


function Button({ children }) {
	return <button>{children}></button>;
}

export default Button;

// App.js

import Tooktak from './Tooktak';
import Button from './Button';

function App() {
  return (
    <div>
		<div>
			<Button>시작</Button>
			<Button>처음부터</Button>
		</div>
		<Tooktak color="blue" num={2}/> // 숫자에 중괄호 사용한 거 체크
    </div>
  );
}

export default App;