패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자

KDT_Megabyte School 핀테크 서비스 프론트엔드 과정 2기

 

## 220805 Today I Learned

• porps

 

props

• props 는 properties 의 줄임말로 상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용됨
• 컴포넌트 태그 안에다가 변수명 = 값 형태로 적어면 해당 변수를 그대로 해당 컴포넌트 내부에서 쓸 수 있다. 

import First from './components/First';

function App() {
  return (
    <div>
      <First name="choonsik"/>
      <age = {5}/>
    </div>
  );
}

export default App;

 

props의 장점

• props 를 쓰는 것이 좋은 이유는 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다는 점
• 틀은 유지한 채로 값만 우리가 원하는대로 바꿔서 여러 개의 수표를 만들어 놓을 수 있다
• props를 받아올때는 변수를 분해하면서 받아오는 비구조할당을 사용하는 것이 가장 좋다.

const data = {'name': 'choonsik', 'age': 5}
const {name, age} = data

import React from 'react'

function First(props) {
	const {name, age} = props

  return (
    <div>이름은 {name}, 나이는 {age}</div>
  )
}

export default First