목차
1️⃣ 컴포넌트 상태 다루기
2️⃣ 컴포넌트 사이드이펙트 다루기
3️⃣ 커스텀 훅 만들기
4️⃣ Hook Flow 이해하기
useState()
란?
useState
는state
의 초기값을 정할 수 있고,return
값으로state
,setState
를 돌려주는hook
이다.
예제: useState()
를 이용한 기존의 코드 리팩토링
import ReactDOM from 'react-dom'; import React from 'react'; import logo from './logo.svg'; import './App.css'; const rootElement = document.getElementById('root') function App() { const [keyword, setKeyword] = React.useState(""); const [result, setResult] = React.useState(""); const [typing, setTyping] = React.useState(false); // 💡💡💡 // useState 함수 : [value, setValue] 로 사용됨. // setValue(새로운 값)를 통해서, 기존의 value에 새로운 값을 넣음. // 이렇게 만들면, {value}로 함수 안에서 접근가능 // 💡💡💡 function handleChange (event) { setKeyword(event.target.value); setTyping(true); } function handleClick() { setResult(`We find results of ${keyword}`); setTyping(false); } return ( <> <input onChange={handleChange} /> <button onClick={handleClick}>search</button> <br/> <span>{typing ? `Looking for ${keyword}` : result }</span> </> ); } ReactDOM.render(<App/>, rootElement); export default App;
변수의 값, 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트 해주는 함수
(맨 처음 렌더링 될때 한번 실행되며, 배열로 지정한 useState 값이 변경 될때마다 실행됨)
예제 : useEffect
다뤄보기
import ReactDOM from 'react-dom'; import React from 'react'; import logo from './logo.svg'; import './App.css'; const rootElement = document.getElementById('root') function App() { const [keyword, setKeyword] = React.useState(()=> { console.log('initialize') return window.localStorage.getItem("keyword"); }); // 💡💡💡 // keyword의 기본값을, localStorage에 저장된 keyword 값을 불러와서 설정함. // 함수에 담는 이유는, render 후에 initialize까지 다소 delay가 있더라도 확실히 불러온 다음에 쓰기 위함. // 💡💡💡 const [result, setResult] = React.useState(""); const [typing, setTyping] = React.useState(false); console.log("render") React.useEffect(()=>{ console.log('effect'); window.localStorage.setItem("keyword",keyword); },[keyword,typing]); // 💡💡💡 // keyword 값이 바뀔 때마다 localStorage에 keyword를 저장함. // 두번째 인자로 주는 배열 : dependency array ➡️ 비교할 값을 지정함. // 💡💡💡 function handleChange (event) { setKeyword(event.target.value); setTyping(true); } function handleClick() { setResult(`We find results of ${keyword}`); setTyping(false); } return ( <> <input onChange={handleChange} value={keyword}/> <button onClick={handleClick}>search</button> <br/> <span>{typing ? `Looking for ${keyword}` : result }</span> </> ); } ReactDOM.render(<App/>, rootElement); export default App;
localstorage 보는법
검사 -> Application -> Local Storage
위의 예제에서 사용한 코드를 보면, 입력값마다 useState를 사용하는 코드를 선언했다.
이를 효율적으로 사용하기 위해, useState와 useEffect를 동시에 사용하는 커스텀 훅을 만들어 보겠다!
예제: useState와 useEffect를 동시에 사용하는 커스텀 훅 만들기
function useLocalStorage를 만들어보자!
import React from 'react'; import './App.css'; function useLocalStorage(itemName, value="") { const [state, setState] = React.useState((itemName) => { return window.localStorage.getItem(itemName) || value; }) // itemName을 state에 저장하고, localStorage에서 itemName을 getItem으로 불러옴 // 만일 localStorage의 값이 없으면, 빈 문자열을 불러옴 React.useEffect(() => { console.log('effect'); window.localStorage.setItem(itemName, state); }, [state]); return [state,setState]; } function App() { const [keyword, setKeyword] = useLocalStorage("keyword"); const [result, setResult] = useLocalStorage("result"); const [typing, setTyping] = useLocalStorage("typing",false); function handleChange (event) { setKeyword(event.target.value); setTyping(true); } function handleClick() { setResult(`We find results of ${keyword}`); setTyping(false); } return ( <> <input onChange={handleChange} value={keyword}/> <button onClick={handleClick}>search</button> <br/> <span>{typing ? `Looking for ${keyword}` : result }</span> </> ); } export default App;
- render
- useState
- render 끝
- useEffect
- dependency array가 없을때 -> 모든 변경 사항이 render 될때마다 호출
- dependency array가 empty일때 -> 처음에 render 될 때만 호출
- dependency array가 있으면 -> array의 변경 사항에 따라 호출
useState에서 setState시, 이전의 값을 불러오는 prev 값이 주입된다.
useEffect는 부모보다 children이 먼저 실행된다.
clean up후에 useEffect가 실행되는데,
clean up은 부모가 먼저 일어난다.
코드 위치 옮기기 ➡️
alt(option)
+방향키
코드 복사해서 옮기기 ➡️alt(option)
+shift
+방향키
Hook 이란?
(use 로 시작하면 Hook이다.)