버튼 누를때마다 숫자 올라가는
App()
import { useState } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev + 1); return ( <div> <h1>{counter}</h1> <button onClick={onClick}>Click Me</button> </div> ); }
useState
를 사용하면 어떤 state가 변하든 컴포넌트의 모든 코드가 리렌더링됨
✍ 컴포넌트가 맨 처음 render될 때만 코드가 실행되고 state가 업데이트 될 때는 실행되지 않기를 원한다면?
function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev + 1); console.log('i run all the time'); const iRunOnlyOnce = () => { console.log('i run only once'); } useEffect(iRunOnlyOnce, []); // useEffect(() => console.log('i run only once'), []); return ( <div> <h1>{counter}</h1> <button onClick={onClick}>Click Me</button> </div> ); }
useEffect(function, []);
첫 번째 파라미터는 실행시킬 함수, 두 번째 파라미터(배열)는 확인할 값- 확인할 값이 빈 배열일 경우 해당 함수는 컴포넌트가 처음 렌더링 될 때만 실행됨
*state 초기값 0으로 설정해줘야 NaN 안뜬다..
✍ 특정한 state가 변할때만 원하는 코드가 실행되도록 하려면?
function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(''); const onClick = () => setCounter((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => console.log('i run only once'), []); useEffect(() => { if(keyword !== '' && keyword.length > 3) { console.log('search for', keyword) } }, [keyword]); useEffect(() => { console.log('i run when counter changes')}, [counter]); return ( <div> <input value={keyword} onChange={onChange} type="text" placeholder="Search Here" /> <h1>{counter}</h1> <button onClick={onClick}>Click Me</button> </div> ); }
useEffect(() => { console.log('i run when counter changes')}, [counter]);
의 두 번째 파라미터인 counter 값이 변경될 때마다 함수가 실행됨- 첫 번째 파라미터로
() => { if(keyword !== '' && keyword.length > 3) {console.log('search for', keyword) }
처럼 조건문 넣기도 가능- 두 번째 파라미터에
[keyword, counter]
처럼 item이 두 개 이상 있을 때는 한 item만 변경되어도 코드 실행(OR의 개념?)
📌 사용자의 조작에 따라 실행시킬 코드를 분리 가능!
✍ 컴포넌트가 없어질 때 실행하고 싶은 코드가 있다면?
function Hello(){ useEffect(() => { console.log("hi!); return console.log("bye!"); }, []); return <h1>Hello</h1> } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( <div> {showing ? <Hello /> : null } <button onClick={onClick}>{showing? 'Hide' : 'Show'}</button> </div> ); }
Hello()
는<h1>
을 반환하는 함수useEffect
의 첫 번째 파라미터에서 return 하는 함수는<Hello />
컴포넌트가 사라질 때마다 실행됨
(사담)
최근에 예스24에서 2022 젊은 작가 투표했을 때 투표를 완료해도 위의 이벤트 배너 부분은 다시 로드되지 않고 아래 화면만 투표 현황으로 바뀌는 페이지를 보고 이 기능이 생각나서 뒤늦게나마 정리해서 업로드,,