[ React ] 컴포넌트 (Component)

📌 컴포넌트란 ?

리액트의 컴포넌트는 트리형 구조로 함수형, 클래스형으로 분류됩니다.

 

함수형 컴포넌트에 대해서 살펴보겠습니다.

⓵ 하위컴포넌트에 외부에서 사용할 모듈 이름을 지정하고 ⓶ 상위컴포넌트에서 모듈을 불러오는 방식을 사용합니다.

📍--- App.js (상위)

function App() {
  return (
    < >
      <NewJeans name={"해린"}/>
      <NewJeans name={"혜인"}/>
      <NewJeans name={"하니"}/>
      <NewJeans name={"민지"}/>
      <NewJeans name={"다니엘"}/>
    </>
  );
}
export default App;

📍--- NewJeans.js (하위)
function NewJeans(props) {
	return <h1>Hello! {props.name}<h1>;
}

 

NewJeans를 여러번 렌더링 하는 App컴포넌트를 만들 수 있으며 이를 컴포넌트 합성이라고 하는데 코드의 재사용성을 높일 수 있습니다.

 

위와 같이 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수를 Props라고 하는데 하위 컴포넌트에서 첫번째 매개변수로 prop를 받을 수 있습니다.

상위컴포넌트에서는 컴포넌트의 속성값을 동일이름으로 지정하여야합니다.

 

 

두번째 방법 )

📍--- App.js (상위)

function App() {
  return (
    < >
      <NewJeans/>
    </>
  );
}
export default App;

📍--- NewJeans.js (하위) 

  function NewJeans({name = "이름없음"}) { //props값을 받음
  return (
    <div>
      Hello! {name}<br/>
    </div>
  )
}

하위 컴포넌트에서 사용할 때에는 { } 중괄호를 사용하여 값을 받을 수 있습니다. 

 

📌  Props의 타입 검증하기

✔︎ 실제 에러가 나는 것은 아니지만 타입에 대한 힌트를 주는 역할을 합니다.

MyComponent.prototype = {
  name : PropTypes.string,
  age : PropTypes.number,
  addr : PropTypes.string
}