[React] 컴포넌트 상태 다루기 :: useState

 

🎯 useState

• DOM : 논리 트리
• 컴포넌트 : 엘리먼트의 집합
• 엘리먼트 : 컴포넌트의 구성 요소

 

📝 useState로 다시 만들어 보는 간단한 검색창

• 객체를 담아주고 계속 render를 해줬던 부분을 useState을 사용해서 변경된 값을 화면에 업데이트하여 반영해준다.

const rootElement = document.getElementById('root');

const App = () => {
    const [keyword, setKeyword] = React.useState("");
    const [result, setResult] = React.useState("");
    const [typing, setTyping] = React.useState(false);

    function handleChange() {
        setKeyword(event.target.value);
        setTyping(true)
    }

    function handleClick() {
        setTyping(false);
        setResult(`we find results of ${keyword}`)
    }

    return (
        <>
            <input onChange={handleChange}/>
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for..${keyword}` : result}</p>
        </>    
    )
};

ReactDOM.render(<App />, rootElement);

const [상태 값 저장 변수, 상태 값 갱신 함수] = React.useState(상태 초기 값);

• 대괄호를 이용하여 state 변수를 선언
• useState는 state 변수, 해당 변수 갱신 함수를 반환하여 구조 분해 할당으로 값이 할당된다.
• 위 예시를 뜯어보면 onChange 이벤트가 발생되면 handleChange가 실행되고 setKeyword 상태 값 갱신 함수로 생태를 업데이트해준다. 업데이트된 값은 p태그 안에 표시된다.

 

🏷 요약

• 컴포넌트 -> 엘리먼트 집합
• useState -> 상태 값을 관리해주는 훅
  • 컴포넌트 안의 상태를 관리

 

📌 참고

• Using the State Hook - React
• React Hooks: useState 사용법