Web_React #22

210826
Web_React #22

• Props(Properties)

JSX문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 한다.

컴포넌트에 속성을 지정하면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.

import Dice form './Dice'

function App() {
	return (
    	<div>
        	<Dice color="blue" />
        </div>
    )
 }
 
 export default App

-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice(props) {
 console.log(props)
 return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

코드에서 App에서 사용하는 Dice컴포넌트에는 color라는 속성을 blue로 지정하고, Dice 함수 내에서 props라는 파라미터를 하나 만들어 출력하면 콘솔에서 출력 결과가 이와같이 나온다.

{color: "blue"}

컴포넌트를 활용할 때 속성값을 다양하게 전달하고 props값을 활용하면, 같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 결과를 준다.

• Children
  props중 children이라는 prop
  JSX문법에서는 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 형태로 작성하면, 그 안에 작성된 코드가 children값에 담기게 된다.
  -Button.js

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

export default Button;

-App.js

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;

JSX문법으로 컴포넌트를 작성하면 정보를 전달할 때 일반적 props의 속성값을 주로 활용하나, 화면에 보여질 모습을 더 직관적임을 원한다면 children을 활용한다.
children은 단순 텍스트만 작성하는 것 외에 컴포넌트 안에 컴포넌트를 작성할 수 있고, 복잡한 태그들을 더 작성할 수 도 있다.

참고
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react