React의 함수형 Component ( feat. Hooks )

 

목차

1. 함수형 컴포넌트란??

2. Hooks

3. useState

4. useEffect

5. 함수 컴포넌트 props 전달

 

 

 

1.  함수형 컴포넌트

 

함수형 컴포넌트란 이름에서부터 알 수 있듯이 함수를 기반으로 함 컴포넌트를 말한다.

기존에 우리가 사용했던 class 컴포넌트와 달리 코드가 훨씬 짧고, 직관적으로 짤 수 있으며 함수형 프로그래밍을 할 수 있게 해준다. (this를 더이상 안써도 된다!!)

지금은 아니지만 과거 함수형 컴포넌트의 단점으로는 state와 라이프사이클 API를 사용할 수 없다는 것이 었는데 이러한 단점을 해결하고자 Hooks 가 나왔다.

 

 

Hooks에 대해서는 아래에서 설명을 더 하게 될텐데 2019년 이후부터 함수형 컴포넌트에 Hooks라는 함수모음을 가져와서 함수형 컴포넌트에 추가적인 기능들을 구현할 수 있게 해주었다. 이제 우리는 함수형 컴포넌트와 Hooks를 같이 사용하면서 코드를 진행할 것이다.

 

 

아래의 코드는 함수형 컴포넌트의 기본 코드이다.

import React from 'react'

const State = () => {
    return(
        <div>   
            <button> 
                Click me
            </button>
        </div>
    )


}
export default State

 

2.  Hooks

리액트 v16.8로 업데이트되면서 추가된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 없었다는 단점을 해결하기 위해 추가된 기능이다.

 

Hooks의 종류로는 여러가지가 있지만 그 중에서 useState와 useEffect에 대해서 설명하고자 한다.

 

1. useState :함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 기능을 가지고 있다.

 

2. useEffect : useState와 화면이 렌더링이 된 후 작업을 실행하는 기능을 가지고 있다/

 

useEffect은 사이드 이펙트라고도 불리며 클래스 컴포넌트에 주로 쓰였던 componentDidMount, componentDidUpdate, componentWillUnmount 총 3개가 포함되어 있다.

 

 

 

 

 

3.  useState

함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다. 상태를 관리해야하는 일이 생길 때 사용하자.

 

 

사용방법                                                                 ----- 버튼을 누를 때마다 count가 1씩 올라가는 코드 -----

import React,{useState} from 'react'  // 1번

const State = () => {
    const [count,setCount] = useState(0) // 2번 배열 비구조화 할당

    return(
        <div>
            <p>You clicked {count} times</p>
            <button onClick={ ()=>{ setCount(count+1) } }> 
                Click me
            </button>
        </div>
    )


}
export default State

• 일단 먼저 알아둬야 할 것은 Hooks를 사용할 때는 함수 안에 사용하고 return 위에 있는 영역에서만 사용이 가능하다. 그리고 Hooks는 리액트 라이브러리 안에 있기 때문에 리액트에서 끄집어 내야만 한다. ->  1번

 

• useState(0)은 함수라는 것을 알아야한다. 뒤에 ( 0 ) 은 상태의 기본값을 나타내고 위에 코드의 예시로 봤을 때 State 컴포넌트의 기본 상태값을 0으로 설정해줬다고 생각하면 된다.  이 useState(0) 함수는 실행 후에 배열을 반환하는데, 이 배열의 첫번 째 값인 count와 두번째 값인 setCount을 배열 비구조화 할당을 이용해서 따로 선언해주었다. 

 

• 여기서 [count, setCount]에 대해서 간단하게 설명하자면
  count     :  count는 현재의 상태값을 나타내고 있다 -> const count = state[0]
  setCount : 상태의 값을 재설정할 수 있다. -> const setCount = state[1] 인자값을 1로 바꿀 수 있음.
  즉 setCount(0)에 인자값을 넣어서 호출하면 전달받은 인자값으로 값이 바뀌게 되고 컴포넌트는 상태값이 바뀌게 되니 다시 렌더링이 될 것이다. -> 2번

 

• 함수형 컴포넌트를 사용할 때 알아둬야 할 점은 class 컴포넌트와는 달리 함수형 컴포넌트가 실행이 될때 return 안에만 실행이 되는 것이 아닌 전체가 다 실행이 된다. 그래서 어디든 console.log를 치면 다 실행이 되는 것을 확인 할 수 있다.

 

 

 

 

4.  useEffect

useEffect는 간단하게 말해 class 컴포넌트에 사용했던 생명주기의 기능이라고 생각하면 된다. 

위에 앞서 설명했던 componentDidMount 와 componentDIdUpdate 등의 기능이 포함되어있다고 생각하자.

 

 

useEffect는 useState와 똑같이 react 안에 들어가있는 친구이기 때문에 useState가 했던 것처럼 똑같이 import에 적용시켜줘야한다.

 

useEffect는 2개의 인자값을 가지고 있다.

 

 

1. 첫 번째는 callback 함수가 들어간다. ( ( ) => { } )   이 값은 필수로 들어가야 한다!

 

2. 두 번째는 deps로 array를 말한다. 이 값은 필수는 아니다!

 

 

자 그러면 코드의 예시를 통해 좀더 설명을 들어가보도록 하자.

import React,{useState, useEffect} from 'react' // 1번

const Effect = () => {
    const [count,setCount] = useState(0)

    useEffect(()=>{
        document.title='hahaha' // 4번
        console.log('안녕')
    },[])  // 2번
    	   // [count] 3번

    return (
        <div>  
            <p>You clicked {count} times</p>
            <button onClick={ ()=>{ setCount(count+1) } }> 
                Click me
            </button>
        </div>
    )
}

export default Effect

• useEffect는 useState와 똑같이 react 안에 들어가있는 친구이기 때문에 useState가 했던 것처럼 똑같이 import에 적용시켜줘야한다.    1번

 

• 자 그러면 useEffect를 사용해보도록 하자. 먼저 우리는 생명주기에 있었던 componentDidMount의 기능을 사용해보도록 해보자. componentDidMount의 기능은 컴포넌트가 화면에 가장 처음으로 렌더링 했을 때 실행되야하는 경우(딱 한번)이므로 이 기능을 사용하기 위해서는 useEffect의 두번째 인자값인 배열의 값을 비워두기만 하면 바로 적용이 된다.    2번 

 

• 그러면 배열에 값을 넣어보면 어떻게 될까?? 배열에다가 count를 넣어보도록 하자. 그러면 우리가 버튼을 클릭할 떄마다 상태값이 계속 바뀌게 될거고 상태값이 바뀌면 렌더링이 계속해서 실행이 될테니 useEffect는 componentDidMount에서 componentDidUpdate의 기능으로 바뀌면서 함수가 계속 실행이 되는 것을 볼 수 있을 것이다.    3번

 

• 추가적인 기능으로 document.title="" 안에 내용을 넣으면 react 상단의 제목이 바뀌는 것을 확인할 수 있다.   4번

 

 

 

 

 

 

5.  함수 컴포넌트 props 전달

 

props에 대해선 저번에 한번 공부를 했었다. props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 여러개가 될 수도 있다.

 

 

먼저 App 컴포넌트에서 Props컴포넌트로 props를 보내는 과정의 코드를 보도록 하자.

const App = () => {
  return (
    <div>
      <h1>Props</h1>
      <Props 
        value="데이터를 전달해줌"
      />

      <Props value="oh-ho">
        hello world!
      </Props>
    </div>
  );
}

export default App;

 

 

이 다음은 App 컴포넌트로부터 받은 props를 받은 Props 컴포넌트의 코드이다.

import React from 'react'

const Props = ({value,children}) => { // props를 건내줄때 매개변수에 넣어주면 된다. 
    console.log(value,children)
    return(
        <div>
            hello props
        </div>

    )
}

export default Props

 

• 우리는 Props 컴포넌트를 동시에 두번을 보낼 것이다. 첫 번째는 원래 우리가 하던 방식인 props로 보내는 방식이고 두 번째는 children을 통해서 props를 보내는 방식이다.

 

• 함수 컴포넌트에서는 props를 건내줄 때 Props 컴포넌트에 있는 매개변수에다가 props 변수명을 넣어주면 된다.

 

• children을 통해서 보낸 porps는 그대로 매개변수에다가 children이라고 적으면 적용이 된다.