ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • useState
    개발/react 2020. 12. 21. 20:14

    useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. 

     

    const NoteApp = () => {
      
      const [notes, setNotes] = useState([])
      const [title, setTitle] = useState('')
      const [body, setBody] = useState('')

     

    useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 state 값을 변형 시킬 수 있는 setter 함수다. 

     

     const addNote = (e) => {
        e.preventDefault()
        setNotes([
          ...notes, 
           { title, body }
        ])
        setTitle('')
        setBody('')
      }
    
      const removeNote = (title) => {
        setNotes(notes.filter((note) => note.title !== title))
      }

     

    기존에는 setState를 이용해서 모든 오브젝트를 다시 초기화해야 했다면 useState에서 넘어온 setter 함수를 이용해 내가 업데이트 하고 싶은 state만 명시적인 함수로 호출이 가능하기 때문에 관리가 한결 수월해진 측면이 있다. 한 컴포넌트 내에서 관리할 state 인자가 많아질수록 유용해질 기능인 것 같다.

     

    '개발 > react' 카테고리의 다른 글

    useReducer  (0) 2020.12.22
    useEffect  (0) 2020.12.21
    useState  (0) 2020.12.21
    connect  (0) 2020.12.20
    react router  (0) 2020.12.17
    redux  (0) 2020.12.16

    댓글 0

Designed by Tistory.