1. 함수형 컴포넌트❓

React.js주요개념 포스팅에서 적었던 것처럼 컴포넌트 작성은 2가지 방식으로 가능합니다. 그동안 자주 썼던 ①클래스 컴포넌트 방식, 그리고 지금 자세히 배워볼 ②함수형 컴포넌트 방식이 있습니다. 과거에는 클래스 컴포넌트가 주로 사용됐으나, 2019년 v16.8 React부터 함수형 컴포넌트에 훅(Hook)이 도입되어 함수형 컴포넌트가 가지고 있던 단점들이 많이 해결되었고, React 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있습니다.

하지만, 공식문서에서 클래스 컴포넌트 또한 계속 사용할 계획이라고 확실히 명시해줬기 때문에 2가지 방식 중 더 편한 컴포넌트를 사용해도 될 것 같습니다.

2. 함수형 컴포넌트 특징

1. 함수형 컴포넌트가 클래스컴포넌트보다 최초화면 렌더링 속도는 7~13프로 정도 더 빠릅니다. 보통 소비자들은 최초화면 렌더링 시간이 얼마나 걸리냐에 따라 사이트의 속도를 판별한다고 합니다. 그래서 함수형 컴포넌트를 최초 페이지를 렌더링 할때 사용하는 것이 좋을 수 있습니다.

2. 함수형 컴포넌트는 함수를 많이 넣는 것을 권장하지 않습니다. 함수형 컴포넌트는 전체를 다 실행시켜버리기 때문입니다. 반면, 클래스 컴포넌트는 일정 이벤트 동작시에만 함수를 실행시키는 것이 가능합니다.

3. 함수형 컴포넌트에서는 this를 쓰지 않는다!!!

3. useState 사용법

함수형 컴포넌트에서 state를 작성하기 위해서는 useState를 사용해야합니다.
이는 위에서 말했던 React v16.8에 새로 추가된 Hook이라는 기능이 생기고 가능해졌습니다! Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. 오늘은 useState에 대해서만 자세히 포스팅 해보겠습니다.

✔ 함수형 컴포넌트 example 작성

    const Examples = ()=>{
        return(
            <>
                Hello function component
            </>
        )
    }

애로우 함수로 함수형 컴포넌트 example을 작성해봅니다.

💻 결과물

state 값이 없는걸 확인할 수 있습니다.

✔ 함수형 컴포넌트 example 안에 useState 쓰기

이제 useState를 사용해서 똑같은 결과물을 만들고 state 값을 만들어보겠습니다.

    const Examples = ()=>{
        const [hello,setHello] = React.useState('Hello function component')
        return(
            <>
                {hello}
            </>
        )
    }

💻 결과물

보시다시피 결과물은 위와 똑같지만 state값안에 Hello function component라는 값을 넣어 state값을 가져와 결과물을 출력하였습니다.

코드를 하나하나 분해해서 보면

const [hello,setHello] = React.useState('Hello function component')
const [변수명,set변수명] = React.useState(초기값)

다음과 같습니다.

• 변수명 : 갖다 쓸 변수명
• set변수명: 새로운 값을 지정해줄때 사용할 함수 클래스 컴포넌트로 치면 this.setState를 대신해서 쓸 수 있는 녀석입니다.
  EX) this.setState(hello: 'hi') => setHello('hi')
• useState : 함수형컴포넌트 안에 state를 생성하도록 해줍니다. React 안에 있기 때문에 꼭 React.useState로 써줘야되며, 괄호 안에는 초기값을 설정해줄 수 있습니다.

4. function 컴포넌트로 state값 넘겨주기

useState를 사용해서 state값을 줄 수 있기때문에 당연히 props로 값도 넘겨줄 수 있다!

    const Examples = ()=>{
        const [hello,setHello] = React.useState('Hello function component')

        return(
            <>
                <Examples2 hello={hello} />
            </>
        )
    }

    const Examples2 = (props)=>{
        return(
            <>
                <Examples3 hello2={props.hello} />
            </>
        )
    }

    const Examples3 = (props)=>{
        return(
            <>
                {props.hello2}
            </>
        )
    }

    ReactDOM.render(
        <Examples />,
        document.querySelector("#root")
    )

Example에 있는 hello 값을 hello라는 변수에 담아서 Example2로 넘겨주고, 이를 또다시 hello2라는 변수에 담아 Example3로 넘겨줬다!
이때 Example2와 Example3는 props를 인자값으로 받아줘야한다!

⭐그리고 함수형 컴포넌트에서는 this를 쓰지 않기 때문에 this.props.변수명이 아니라 props.변수명으로 값을 받아온다!

💻 결과물

개발자도구에서 컴포넌트를 보면 props값을 잘 받아온 것을 볼 수 있다.

안녕하세요!😊 국비지원으로 개발쪽 공부를 시작한 학생입니다!
혹시나 제가 잘못된 정보를 제공하고 있다면 댓글 부탁드립니다! 💚
글 읽어주셔서 정말 감사합니다🙇‍♀️