[React] React 시작하기(2) - Component & Props

Component 란?

컴포넌트는 html 을 반환하는 함수이다.

UI 를 기능별로 여러 조각으로 나눠 사용할 수 있게한다.

앱의 일부를 렌더링 하는 재사용 가능한 모듈이라고 할 수 있다.

 

Component 선언하기

컴포넌트는 항상 대문자로 시작해야한다.

function Hello(){
  return <div>hello, this is React!</div>
}

React 는 파스칼-케이스(pascal-case) 변수 이름을 사용한다.

정규 Html 태그가 아니라는 것을 명시하기 위해서다.

 

1. 간단한 컴포넌트 예시입니다.

function App() {
  return (
    <div className="App">
      <h4 className="header">
        This is title.
      </h4>
      <div className="content">
        Hello! This is content area.
      </div>
    </div>
  );
}

 

2. 같은 JS 파일에서 컴포넌트를 작성했을 시

function App() {
  return (
    <div className="App">
      <h4 className="header">
        This is title.
      </h4>
      <div className="content">
        Hello! This is content area.
      </div>
      <Button /> // 컴포넌트 삽입!
    </div>
  );
}

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

 

3. 다른 JS 파일에서 컴포넌트를 작성, 사용하려는 경우

import Button from './Button.js'

function App() {
  return (
    <div className="App">
      <h4 className="header">
        This is title.
      </h4>
      <div className="content">
        Hello! This is content area.
      </div>
      <Button /> // 컴포넌트 삽입!
      <Button /> // 이렇게
      <Button /> // 여러개 사용도 가능하다 🎈
    </div>
  );
}

 

Props 란?

컴포넌트에 데이터를 전달하는 방법이다.

React 는 단방향 데이터 흐름을 지향하기 때문에 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶을 때

props 로 전송해서 써야한다.

전달된 이후에는 변수를 통해 접근 가능하다.

 

Props 사용하기

state 전송하는 방법은

<자식 컴포넌트 사용자정의={state이름} />

의 형태를 취하면 된다.

 

이후 자식 컴포넌트 function 에서 props라는 파라미터를 등록 후

props.사용자정의 를 사용하면 된다.

// 부모 컴포넌트
function App() {
  return (
    <div className="App">
      <SayHello name="Apple" /> // 여기서 사용자 정의는 name
      <SayHello name="Samsung" />
      <SayHello name="LG" />
    </div>
  );
}

// 자식 컴포넌트
function SayHello(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

이때 state 만 전송할수 있을 뿐만 아니라

<SayHello name={state이름} /> 일반 변수, 함수 전송도 가능하고,

<SayHello name="" /> 일반 문자 전송 까지 가능하다.

 

❗ 자식 -> 부모 방향의 state 전송을 불가능 하다

❗ 자식 -> 자식 방향의 state 전송도 불가능 하다