react) 함수형 컴포넌트사용

... 생활코딩에서 이거 함수형 컴포넌트로 하는것만 보다 책에서 계속 클래스형으로 쓰길래 너무 헷갈렸는데 드디어 살짝 이해 가능해짐..

함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 이용할수가없다. 상위컴포넌트에서 props와 context를 파라미터로 전달받아 사용하고 render() 함수가 없어서 return 만 사용해 화면을 그려준다.

-> ???? 이게 맞는건가 모르겟네,,

import React from 'react';
import './App.css';
import FunctionComponent from './R030_FunctionComponent'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>Css적용하기</p>
      <FunctionComponent contents="[THIS IS FunctionComponent]">
      </FunctionComponent>
    </div>
  );
}

export default App;

import React from 'react';

function R030_FunctionComponent(props){
    let {contents} = props;
    return(
        <h2>{contents}</h2>
    )
}
export default R030_FunctionComponent;

함수형 컴포넌트는 return값이 있는 function과 동일한 구조를 갖는다.

상위컴포넌트에서 전달받은 props를 지역변수에 할당하고 클래스형이랑 다르게 props앞에 this가 붙지않는다. 

 

Hook사용

함수형 컴포넌트에서 클래스형과 같이 state와생명주기 함수같은 기느을 사용하기 위해 hook을 이용한다.

hook 함수에는 useState()와 useEffect()가 있다.

import React from 'react';
import './App.css';
import ReactHook from './R031_ReactHook'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>Css적용하기</p>
      <ReactHook>
      </ReactHook>
    </div>
  );
}

export default App;

import React, { useEffect, useState } from 'react';

function R031_ReactHook(props){
    const [contents, setContents] = useState('[this is react]');

    useEffect( () => {
        console.log('useEffect fnc');
    });

    return(
        <div>
            <h2>{contents}</h2>
            <button onClick={ () => setContents('[this is hook]')}>버튼</button>
        </div>
    )
}

export default R031_ReactHook;

리액트에선 기본적으로 useState()와 useEffect()함수를 제공한다.

useState() 함수로 state변숫값을 선언및 할당한다.

const [contents, setContents] = useState('[this is react]')
contents는 변수 이름 setContents는 state변숫값을변경해주는 함수이다. 그럼 contents에 this is react 가 들어간다.

useEffect() 함수는 생명주기 함수 componentDidMount()와 같이 return되는 html코드들이 화면에 그려진후에 실행된다.