리액트 함수형 컴포넌트

처음엔 함수형 컴포넌트에 한계가 있었지만, 지금은 hook을 이용하여 편하게 사용할 수 있다.

 

0. 선언

function 컴포넌트명(props){
  return (
    jsx 문법
  )
}

export default 컴포넌트명;

 

1. useState

const [number, setNumber] = useState(props.number);

state를 세팅할 때 사용한다.

위 코드는 state.number를 props.number로 지정하고,

setNumber(변경사항) 은 state의 number를 변경사항으로 변경한다.

 

2.useEffect

useEffect(function(){
  render 후 실행, 반환 전
    return (
      반환 후 실행
    );
});

render 이 후, 컴포넌트 반환 전 실행

return 은 반환 후 실행 (clean up)

 

3.useRef

const nameInput = useRef();
...
//입력값 리셋
const onReset = ()=>{
    setInputs({
        name:'',
        nickname:''
    });
    //리셋 후 커서 위치 조정
    nameInput.current.focus();
}
...
return(
...
 <input 
   name="name"
   placeholder="이름"
   onChange={onChange}
   value={name}
   ref={nameInput}
 />
...
)

특정 DOM을 선택하는 상황에서 사용

 

실습

 

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

function Func(){
    const [text, setText]=useState('');
    //입력값 출력
    const onChange = (e)=>{
        e.preventDefault();
        console.log(e.target.value);
        setText(e.target.value);
    }
    //입력값 리셋
    const onReset = ()=>{
        setText('');
    }

    return (
        <div className="func">
            <input onChange={onChange} value={text}/>
            <div>
                <span>입력값 :</span>
                <span>{text}</span>
            </div>
            <button onClick={onReset}>초기화</button>
        </div>
    );
}

export default Func;

입력할 때마다 입력 값을 표시하는 컴포넌트

초기화 버튼 클릭 시 ''로 input 변경한다.

 

input에 내용 입력	초기화 버튼 클릭