Hooks

useState

• 정의
  • 상태 값 관리
• 예제

import React, {useState} from 'react';

const Info = () => {

    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const onChangeName = e => {
        setName(e.target.value);
    };

    const onChangeNickname = e => {
        setNickname(e.target.value);
    };

    return(
        <div>
            <div>
                <input value = {name}  onChange = {onChangeName}/>
                <input value = {nickname}  onChange = {onChangeNickname}/>
            </div>
            <div>
                <div>
                    이름 : {name}
                </div>
                <div>
                    닉네임 : {nickname}
                </div>
            </div>
        </div>
    );

};

export default Info;

• 이름, 닉네임 받는 코드

 

useEffect

• 정의
  • 리엑트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
  • componentDidMount와 componentDidUpdate를 합친 상태와 유사
    • componentDidMount : 컴포넌트가 웹 브라우저 상에서 나타난 후, 호출하는 메소드
    • componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메소드
      
      
• 예제

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

const Info = () => {

    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    useEffect(() => {
        console.log('렌더링 완료!');
        console.log({
            name,
            nickname
        });
    }, []);     //마운트될 때만 컴포넌트 실행.

    const onChangeName = e => {
        setName(e.target.value);
    };

    const onChangeNickname = e => {
        setNickname(e.target.value);
    };

    return(
        <div>
            <div>
                <input value = {name}  onChange = {onChangeName}/>
                <input value = {nickname}  onChange = {onChangeNickname}/>
            </div>
            <div>
                <div>
                    이름 : {name}
                </div>
                <div>
                    닉네임 : {nickname}
                </div>
            </div>
        </div>
    );

};

export default Info;

• 마운트될 때만 컴포넌트 실행

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

const Info = () => {

    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    useEffect(() => {
        console.log('렌더링 완료!');
        console.log({
            name,
            nickname
        });
    }, [name]);     //name값이 변경될 때만 컴포넌트 실행.

    const onChangeName = e => {
        setName(e.target.value);
    };

    const onChangeNickname = e => {
        setNickname(e.target.value);
    };

    return(
        <div>
            <div>
                <input value = {name}  onChange = {onChangeName}/>
                <input value = {nickname}  onChange = {onChangeNickname}/>
            </div>
            <div>
                <div>
                    이름 : {name}
                </div>
                <div>
                    닉네임 : {nickname}
                </div>
            </div>
        </div>
    );

};

export default Info;

• name값이 변경될 때만 컴포넌트 실행

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

const Info = () => {

    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    useEffect(() => {
        console.log('렌더링 완료!');
        console.log({
            name,
            nickname
        });
    }, [name]);     //name값이 변경될 때만 컴포넌트 실행.

    const onChangeName = e => {
        setName(e.target.value);
    };

    const onChangeNickname = e => {
        setNickname(e.target.value);
    };

    return(
        <div>
            <div>
                <input value = {name}  onChange = {onChangeName}/>
                <input value = {nickname}  onChange = {onChangeNickname}/>
            </div>
            <div>
                <div>
                    이름 : {name}
                </div>
                <div>
                    닉네임 : {nickname}
                </div>
            </div>
        </div>
    );

};

export default Info;