앞서 useState()와 useReducer()에 대해서 배웠다. 그 둘은 state와 state를 관리해주는 hook이라는 점에서 비슷한 점이 많았다. 어떤 것을 사용해야하지는 헷갈릴 때가 많을 것이다. useState()를 반드시 사용해야하는 건 언제인지, useReducer()를 사용해야 좋을 때는 언제인지 정리해보자. 항상 적용되는 규칙은 아니겠지만 적어도 언제 useReducer()가 필요한지 알게 될 것이다. 예를 들어, 너무 많은 일들을 처리해야 하는 상황에 useState()를 사용하면 너무 번거로울 때가 있다. 각각의 state들은 서로 독립적이기 때문에 같이 업데이트가 잘 안된다. useState()는 주요 state 관리 도구로써, 개별 state 및 데이터를 다루기 적합하다. 한 ..
지난 시간에 state에 대해서 다루면서 간단한 state를 다뤄봤다. 이번 시간에는 사용자가 입력하는 여러 값들에 대해서 state를 업데이트하는 방법에 대해서 다뤄볼까한다. How to update State? state를 사용한다고 선언할 때에 useState라는 hook을 사용한다는 것은 앞시간에 다뤘기에 알 것이다. 그렇다면 여러 개의 state는 어떻게 사용할까? 다음 예제들은 사용자로부터 title, amount, date를 받는 코드이다. 여러 예제들을 보고 어떤 코드가 나은지 직접 판단하기 바란다. 예제 1 더보기 const [enteredTitle, setEnteredTitle] = useState('') ; const [enteredAmount, setEnteredAmount] = u..
이전 시간에는 event와 그 event가 발생되었을 때, 작동하는 event handler에 대해서 배웠다. event handler를 사용하여 함수를 실행시킬 수는 있지만, 여기에는 한가지 문제가 있다. let title = 'title' ; const clickHandler = () => { title = 'Update!' ; console.log(title) ; } return ( {title} Change Title ); 위와 같이 버튼이 클릭된다면, title이 "Update!"로 변경될까? 그에 대한 답은 "아니다"이다. 실제로는 전혀 변하지 않는다. 그렇다고 해서 함수가 실행되지 않은 것도 아니다. console.log(title) ; // 'Update!' 심지어 title값을 conso..
