---

Component(함수 컴포넌트)

• 엘리먼트로 구성.
  • 엘리먼트는 React의 최소 단위
  • 엘리먼트는 화면에 표시할 내용을 가짐.
• 재사용 가능한 UI 조각.
• 컴포넌트는 PascalCase로 명명함.
• 클래스 또는 함수형태로 작성하는데 함수형태를 많이 사용함.

// 컴포넌트를 만들 땐 'react'를 import 해야함.
import React from 'react';

function Hello() {
  return <div>안녕하세요</div>;
}
// 컴포트의 최하단에는 export를 통해 Hello 컴포넌트를 내보냄을 명시.
export default Hello;

• App.js 에서 다른 파일에 있는 컴포넌트를 불러 올 때,

import React from 'react';
// Hello 컴포넌트의 경로를 적음.
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

• 컴포넌트는 쉽게 재사용도 가능.

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

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

props(properties)

• 컴포넌트에게 어떠한 값을 전달하려 할때 이용.
• props는 읽기 전용. (props의 값을 수정 불가)
• props는 순수함수; 입력값을 바꾸지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하듯 동작해야 함.

// 순수함수.
function sum(a, b) {
  return a + b;
}
// 입력값을 변경하기 때문에 순수 함수가 아님.
function withdraw(account, amount) {
  account.total -= amount;
}

props 전달

• props는 객체 형태로 전달되므로, props.변수이름 으로 조회 해야함.

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

function App() {
  return <Hello name='react' />;
}

export default App;

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

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

export default Hello;

• 다수의 값을 전달 가능.

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

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

export default App;

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

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

export default Hello;

props 비구조화 할당(구조분해)

• 객체로 전해지는 props 를 간편하게 접근 하는 법.
• 객체의 비구조 할당에 대한 내용은 여기.

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

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

export default App;

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

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

export default Hello;

defaultProps

• defaultProps 로 Props 의 기본값 설정.
• 컴포넌트에 컴포넌트이름.defaultProps 이용해 지정.

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

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>;
}
// 기본값 설정.
Hello.defaultProps = {
  name: '이름없음',
};

export default Hello;

props.children

• 컴포넌트로 무언가를 감쌀때 이용.
• props.children 을 이용해 컴포넌트 태그 사이의 값을 조회 및 배치 가능.

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

function Box({ children }) {
  const style = {
    border: '5px solid red',
    padding: '20px',
  };
  return <div style={style}>{children}</div>;
}

export default Box;

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

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

---