Web/React

[React] 리액트 라이프 사이클과 useEffect Hook

리액트 라이프 사이클과 useEffect Hook 모든 리액트 컴포넌트는 '생명주기 메서드'를 가지며 이를 오버라이딩 하여 특정 시점에 코드를 실행되도록 할 수 있다. 이 글에서 작성하는 것 보다 많은 라이프 사이클 관련 메서드가 존재하지만 위 도표에 나오는 일반적인 라이프사이클 메소드만 기술하였습니다. 마운트 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입 될 때 아래 메서드들이 순서대로 호출된다. constructor() 해당 컴포넌트가 마운트 되기 전에 호출되는 React 컴포넌트 생성자. 메서드를 바인딩하거나 state를 초기화 하는 작업이 없다면 해당 React컴포넌트에서는 구현하지 않아도 된다. 보통 state를 초기화 하거나 인스턴스에 이벤트 처리 메서드를 바인딩 할 때 주로 사용한다. re..

[Redux] 리덕스 공식 문서를 따라 하는데 오류가 난다면?

최근 리액트 상태관리 라이브러리인 리덕스를 공부중입니다. 공식문서가 매우 잘 되어 있어서 공식문서의 튜토리얼을 차근차근 따라 해 보던 중 문서에 종종 빠진 부분이 있어 삽질을 오지게 하고나서 다른 분들은 이와 같은 상황을 겪지 않길 바라며 글을 씁니다. 리덕스는 공식 문서가 매우 잘 되어 있어서 공식문서만 보고도 충분히 익힐 수 있습니다. ( 한글이 없다는 거부감을 넘어서기만 한다면) 저는 Quick Start를 먼저 읽고, Redux 핵심 튜토리얼을 하나씩 진행 중입니다. 문서를 보며 따라 할 수 있게 기본적인 틀이 잡힌 프로젝트를 제공 해주고 그 프로젝트에서 단계별로 진행하면 됩니다. 그런데.. 핵심 튜토리얼의 후반부로 갈수록 수정된 내용이 빠져 있는 경우가 종종 있었습니다. 최종 코드를 보며 빠진 ..

[Redux] 리덕스 개념 정리

방학동안 작게 진행 할 프로젝트에서 리덕스를 써보고 싶어서 리덕스를 공부하기로 했다. react의 context api 를 사용할 수도 있고, 리액트 팀에서 만든 리코일이 핫하게 떠오르고 있다고 하지만 다음과 같은 이유로 리덕스를 사용 해 보기로 했다. 상태 관리 라이브러리 경험을 위해서 내가 진행할 프로젝트에서는 상태관리를 복잡하게 할 필요는 없을 것 같다. 그러나 리액트 상태 관리에 대해 검색해본 바 현업에서는 대부분 상태 관리 라이브러리를 따로 사용하는 것 같았다. 따라서 상태 관리 라이브러리를 사용 해 보아야 겠다고 생각했다. context의 한계 context가 있음에도 상태 관리 라이브러리를 사용하는 이유는 다음 글에서 알아 볼 수 있다. https://yrnana.dev/post/2021-0..

[리액트 훅] useState()를 이용하여 state변경하기

리액트 훅의 useState()로 상태 변경 하기 간단하게 form을 이용하여 유저 정보를 입력 받고 등록된 유저들을 리스트로 출력한다. //app.jsx import './app.css'; import React, { useRef, useState } from 'react'; const App = () => { const [users, setUsers] = useState([ //users의 초기값 = 기존 유저들 정보의 배열 { name: 'Mina', number: '1234' }, { name: 'bob', number: '5678' }, { name: 'Minsoo', number: '9012' }, ]); const name = useRef(); //form의 input을 받을 변수 const..