AI Platform / Web

React를 처음 배우면, useState를 상태관리를 위해 사용한다. 이 글을 보고 있는 여러분도 적어도 한번 정도는 사용해 봤을 것이다. useState는 리액트에 제공하는 가장 기본적은 Hook으로 useEffect와 함께 가장 많이 사용된다. 상태관리가 무엇인지에 대해 알아본 후 useState의 본질적인 사용법에 대해 알아보도록 하자. React에서 State state란 무엇일까? 쉽게 말하면 state는 데이터라고 생각하면 이해가 빠르다. 따라서 상태관리란, 데이터 관리라고 할 수 있다. 공식 문서에 따르면 state를 구분하는 방식은 아래와 같다. 시간에 따라, 변한다면 state가 아니다. parent component에서 Props를 받을 수 있다면, state가 아니다. 기존의 sta..

annot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`). 에러(경고) 발생 문제 원인 위와 같은 에러(경고)가 발생했다. 이는 useState를 변경하는 부분이 useEffect나 이벤트리스터에 의한 변화가 아닌 로직내부에 들어있어서 나는 에러이다. 즉, react는 props나 상태 변화에 따라 여러번 re-render를 한다. 그리고 개발단계에서는 re-render를 통해서 변화를 확인하기도 한다. 해결책 간단히 useEffect 내부에 넣어주면된다. 직관적으로 쉽게 예를 들겠다. const Test = (prop) => { const [data, setData] = useState..

0. 들어가면서 useState를 활용해서 내용을 숨기고 보이는 방법에 대해 알아보자. 우선은 앞의 useState 기초를 확인하고 오자. 우리가 만들 것은 버튼 누를 시 특정 내용이 보이고, 다시 누르면 안보이게 하는 것이다. 기초 개념은 아래에서 참고하자. [Web/React] - [react web] 시작 후 파일 정리 [Web/React] - [react web] Hook 기초_useState [Web/React] - [react web] Hook 기초_useEffect [Web/React] - [React Web] AWS EC2 배포 ALL-IN-ONE [Web/React] - [react web] mocking 모킹 방법 (msw로 데이터 가져오기) 1. 코드 기본적인 component 생성과..

핵심만 압축했습니다. 디테일한 부분은 공식문서를 확인해 주세요! 0. 들어가면서 Hook의 종류는 굉장히 많다. 만약 간단한 프로젝트만 한다면, useState, useEffect 정도만 알아도 충분하고, 복잡한 내용은 useRef 정도를 추가하면 된다. 시중의 블러그나 책은 대부분 같은 내용만 다루는 것 같다. 더하기와 빼기... 물론 좋은 예제이지만 나는 핵심만 압축해서 이야기 해보고자 한다. 기초적 실습을 보여주고, 추가로 프로젝트 시 사용했던 수많은 기술들을 담아보려 한다. 사실 useState와 useEffect 정도만 알아도 이 글을 보고 있는 분들의 초급 수준에서 문제 없다. useEffect는 추가로 다음 블로그에서 이야기 해보려 한다. 1. useState 핵심 html은 변하지 않는다...