앞서 useState()와 useReducer()에 대해서 배웠다. 그 둘은 state와 state를 관리해주는 hook이라는 점에서 비슷한 점이 많았다. 어떤 것을 사용해야하지는 헷갈릴 때가 많을 것이다. useState()를 반드시 사용해야하는 건 언제인지, useReducer()를 사용해야 좋을 때는 언제인지 정리해보자. 항상 적용되는 규칙은 아니겠지만 적어도 언제 useReducer()가 필요한지 알게 될 것이다. 예를 들어, 너무 많은 일들을 처리해야 하는 상황에 useState()를 사용하면 너무 번거로울 때가 있다. 각각의 state들은 서로 독립적이기 때문에 같이 업데이트가 잘 안된다. useState()는 주요 state 관리 도구로써, 개별 state 및 데이터를 다루기 적합하다. 한 ..
What is useReducer()? 앞서서 useState()와 useEffect()에 대해서 다뤄봤었다. 이번에는 다음 React hook인 useReducer()에 대해서 이야기해보자. 간단히 말해, state의 관리를 도와주는 것으로 useState()와 비슷하다. 오히려 더 많은 기능들을 가지고 있다. 특히, 더 복잡한 state에 유용하다. 예를 들어, 여러 state들이 함께 속해 있는 경우에 같이 바뀐다던가 서로가 관련되어 있다면 관리하는 측면에서 사용이나 관리가 어려워지거나 오류가 발생하기 쉬워진다. 효율이 나빠지거나 버그가 생길 수 있는 코드가 되기 쉽상이다. 물론 그런 상황에 다다르는 것을 원하는 개발자는 아무도 없을 것이다. React project를 진행하면서 더 강력한 stat..
이전 시간에 이어서 side effect를 해결하기 위한 방법에 대해서 이야기 해보자. Side Effect란? React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 coding-leaf.tistory.com useEffect()란? React에는 side effect를 처리하는 더 좋은 도구가 있다. useEffect()라는 hook으로 component함수 내부에서 실행할 수 있는 또다른 함수이다. 이 함수는 특별한 일은 하는데, useEffect() 그리고 2개의 parameter와 같이 호출된다. 첫 번째 parameter는 함수로, 모든 co..
React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 그 무언가와 상호 작용하게 하는 것이 주된 목적이었다. JSX 코드와 DOM을 평가하고 렌더링하고 state와 props를 관리한다. 사용자 입력이 올바르게 반영되는지 확인하기 위해서 모든 component에 필요한 데이터가 있는지 체크한다. Side Effect란? side effect 혹은 effect라고 불리는 이것은 무엇일까? side effect는 애플리케이션에서 "범위 밖"을 함께 실행할 때 나타나는 모든 것을 말하며, component가 렌더링된 이후에 비동기로 처리되어야 하는 부수적인..
Ref란? ref는 참조를 뜻하는 reference의 줄임말로 React에서 자주 쓰이는 hook이다. 가장 기본적인 기능은 다른 DOM 요소에 접근해서 참조하여 작업할 수 있게 해주는 것이다. ref에 대해서 설명하기 전에 기존의 코드에 대해서 먼저 언급을 하고 넘어가겠다. 더보기 // 📂 addUser.js import React, { useState } from "react"; import Card from "../UI/Card"; import Button from "../UI/Button"; import Wrapper from "../Halpers/Wrapper"; import ErrorModal from "../UI/ErrorModal"; import styles from "./AddUser.m..
