프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 발생한 문제였다. 문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에 문제가 된다고 알려주는 것 같다!

상태를 관리할 때 사용하는 것으로 useState와 useReducer 가 있다. 하지만 일반적으로 useState를 사용하고 useReducer를 사용하는 일은 거의 없었다. 그러다보니 궁금함이 생겼다. useReducer는 언제 사용하고, 왜 사용하는 것일까? 먼저 간략하게 둘의 차이를 알아보자. useState ▶ 간단한 상태 관리 ▷ 값이 하나인 경우 ▷ 상태들이 서로 관련이 없는 경우 ▶ 컴포넌트 내에서 사용 const [state, setState] = useState(initialState); useReducer ▶ 복잡한 상태 관리 ▷ 상태들이 서로 관련이 있거나, 참조가 필요한 경우 ▷ ex) 로그인된 사용자의 권한을 확인하여 다른 화면에 보여줘야 하는 경우 ▶ 여러 컴포넌트에서 상태가 ..

React에서 Form 태그를 사용하는 경우가 있다. 일반적으로 input, textarea 등 value를 통해 무언가 작업을 한다. 이때, useState를 사용하면 값이 변경될 때 마다 컴포넌트가 리렌더링이 발생하게 된다. 실제 값이 변경됨을 감지해서 무언가 작업을 해야한다면 사용할 수 있지만 그게 아니라면 굳이 필요없는 리렌더링이 발생하게 된다. 이것을 useRef도 아닌 Form 태그 자체 기능을 사용해서 해결할 수 있다. const Component = () => { const handleSubmit = (e: React.FormEvent) => { event.preventDefault(); const target = event.target as HTMLFormElement; const tit..

앞서 useState와 useRef에 대해서 정리를 했었다. [React] useRef 그리고 useState 일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필 bum-developer.tistory.com 해당 부분에 대한 보충 내용이지만 좀 더 개념적인 부분이라 따로 작성했다. 제어 컴포넌트 React에 의해서 값이 제어되는 컴포넌트를 말한다. 우리가 자주 사용하는 useState를 사용해서 DOM 요소의 값을 관리하면 제어 컴포넌트이다. const App = () => [ const [value, setValue] = useState(""); const..

일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필요없는 경우에도 useState를 사용하면 상태가 변경되므로 리렌더링이 발생한다. const Component = () => { const [state, setState] = useState(""); return ( setState(e.currentTaget.value)}/> ) } input에 값을 입력하면 입력할 때마다 리렌더링이 발생한다. 하지만 입력된 값이 변경될 때마다 굳이 화면을 리렌더링해야할 상황인가? 생각해보면 아니다. 만약에 입력한 값이 어디서 동시에 보여져야 한다면 리렌더링이 발생해서 입력한 ..

useState?? useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 아니!! 근데 이런 걸 왜 쓰는 겨?? state는 리액트에서 동적인 부분을 담당한다!! 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면.... 어라? 전부... 정적?? 에라이 ! 와장창!!! 할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다. import React, { useState } from 'react'; function Example() { //..