react.js 시작하기 190807 - 함수형 컴포넌트

음

컴포넌트는 보통 class로 이루어져 있다.

함수처럼 컴포넌트를 사용할수도 있다.

class ClassComponent extends Component {
  render() {
    return (
      <div>
        <FunctionalComponent a='호랑이'/>
        <FunctionalComponent2 a='어흥'/>
      </div>
    );
  }
}

기본적인 클래스형태의 컴포넌트는 위와 같다.

클래스를 선언하고 그안에 랜더함수를 불러서 랜더가 리턴시키는 형식이다.

함수형 컴포넌트를 보쟈

function FunctionalComponent1 (props){		//이것도 컴포넌트다 마
  return (
    <div>
      <h1>{props.a}</h1>
    </div>
  )
}
const FunctionalComponent2 = (props)=>{
  return (
    <div>
      <h1>{props.a}</h1>
    </div>
  )
}

이렇게도 활용할 수 있다

 

rsc snippet을 쓰면

이렇게나온다.

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

 

언제 함수형 컴포넌트를 사용할까?

 

1. state를 쓸 일이 없다.

단, 부모에게서 props를 받는 것은 가능하다.

 

2. 7가지 lifecycle이 없다.

즉, 최적화가 좋다. 개빨라야할때 쓴당.

 

class App extends Component {

  render() {
    return (
      <div>
        <h1>App</h1>  
        <Bpp name='이름' b={10}/>
      </div>
    );
  }
}

const Bpp = ({name,b}) => {
  return (
    <div>
      <h1>Bpp</h1>
      <h3>{name} | {b}</h3>
    </div>
  ); 
}

스코프를 사용하면 저렇게 활용이 가능하다