Front-End/React.js
-
React Hook: useEffect란?Front-End/React.js 2022. 3. 7. 16:21
useEffect의 의미와 사용 방법 사이드 이펙트 구현은 useEffect 훅 함수가 만들어진 이유다. 앞선 글에서도 설명했지만, useEffect를 다룰 때 중요한 개념이니 다시 한번 짚고 넘어가도록 하자. 리액트에서 사이드 이펙트란 '리액트 컴포넌트를 화면에 1차로 렌더링 한 후, 비동기식으로 처리되는 부수적인 효과'다. 이렇게 한 줄로 설명하면 이해가 잘 안 가려나? 쉽게 말해, 일단 화면에 렌더링 할 수 있는 거 다 하고 나중에 비동기식으로 추가, 변동되는 데이터를 처리하는 걸 보고 사이드 이펙트라고 한다. useEffect는 이 사이드 이펙트를 함수형 컴포넌트에서 구현하기 위해 고안된 기능이다. 리액트 공식 홈페이지에선 이를 클래스형 컴포넌트의 생명주기 메소드와 비교해서 설명한다. React의..
-
React Hook: useState란?Front-End/React.js 2022. 3. 7. 11:23
useState의 의미와 사용 방법 이전 글을 통해 React Hook이 만들어진 가장 큰 이유 두 가지가 바로 상태 관리와 사이드 이펙트 구현이라고 설명했다. 리액트는 state에 설정된 데이터, 즉 렌더링에 영향을 미치는 값을 감시하고 이 데이터가 변동되면 리렌더링 한다. 기존 클래스형 컴포넌트에서는 constructor 메소드를 통해 state를 구현했는데 이를 함수형 컴포넌트에서도 쓸 수 있도록 만든 것이 바로 useState다. 다음은 리액트 공식 홈페이지 문서에서 가져온 클래스형 컴포넌트의 state 구현 방식이다. class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }..
-
React Hook이란?Front-End/React.js 2022. 3. 4. 11:50
React의 Side Effect와 State 관리 React의 Side Effect React Component를 화면에 렌더링 될 때를 생각해보자. 코드를 실행하는 과정에서 외부 데이터를 호출할 때 기다리고, 받은 데이터를 출력하고 다시 외부 데이터를 호출하며 기다리고, 다시 그렇게 받은 데이터를 출력하고... 이를 반복한다면 실행 속도가 굉장히 늦어질 것이다. 때문에 일단 화면에 렌더링 할 수 있는 것들을 먼저 렌더링 한 뒤, 나중에 받은 데이터를 비동기식으로 가져오는 것이 권장된다. 이렇게 해야 연동하는 API 응답이 늦어지거나 응답이 없는 경우에도 영향을 최소화할 수 있기 때문에 사용자 경험 측면에서 유리하기 때문이다. 이처럼 'React Component를 화면에 1차로 렌더링 한 후, 비동기..
-
React의 LifecycleFront-End/React.js 2022. 3. 4. 10:26
React Component의 생명주기(Lifecycle)란 무엇인가? '생명주기'라는 이름에서 짐작한 사람도 있을 것이다. 단어 그대로 생각해보자 '생명'의 '주기'. 말 그대로 한 생명이 태어나서 죽을 때까지의 기간을 뜻하는 말이다. 앞서 리액트 라이브러리 소개 글에서 이야기했듯이, 리액트는 작은 컴포넌트들이 모여 만들어진다. 즉, 여기서 이야기하는 생명주기는 리액트 내부에서 쓰이는 컴포넌트가 만들어지고 제거될 때까지의 기간을 뜻하는 말이다. 사람이든 뭐든 태어났으면 언젠가는 죽는 법. 인생사 공수래공수거. 리액트 컴포넌트가 가지고 있는 생명주기는 크게 세 단계로 나누어진다. "생성될 때", "업데이트할 때", "제거할 때". 세 가지 분류는 리액트에서 "Mount", "Update", "Unmoun..
-
Props와 StateFront-End/React.js 2022. 3. 4. 10:11
리액트 컴포넌트의 두 가지 데이터 우리는 앞선 게시글을 통해 리액트는 컴포넌트 기반 사용되는 라이브러리라는 것을 알았다. 모두 알고 있듯 컴포넌트는 코드를 필요에 따라 작게 나눈 단위다. 그렇다면 공통된, 혹은 공유해야 하는 데이터를 컴포넌트끼리 주고받을 때에는 어떻게 해야 할까? 이를 위해 나온 개념이 바로 Props와 State다. 리액트에서는 이 두 가지 데이터를 통해 컴포넌트 내부, 혹은 컴포넌트 사이의 데이터를 활용한다. Props Props는 Properties의 줄임말이다. 영어 사전을 뒤져보자. Property는 속성, 성질 등의 뜻을 가지고 있다. React에서도 이를 그대로 적용해서 생각하면 된다. props는 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용하는 개념이다. ..
-
React의 개념과 특징Front-End/React.js 2022. 3. 2. 12:39
서론 원래 프론트엔드 쪽으로는 뜻이 크게 있지 않았기 때문에 관련 라이브러리나 프레임워크 또한 잘 모르는 상태였다. 어쩌다 보니 회사에서 진행하는 프로젝트를 통해 프론트엔드 쪽 개발, 특히 리액트를 기반으로 한 개발을 맡게 되었다. 어찌어찌 프로젝트는 잘 마무리되었지만 리액트를 급하게 익혔기 때문에 개념적인 부분을 제대로 잡고 가지 못한 부분이 있었다. 프로젝트 진행 당시 이 건만 어느 정도 마무리되면 부족했던 부분을 채워 정리해놓아야겠다 생각했는데, 지금이 바로 적기라는 생각이 들었다. 리액트란 무엇인가? 개발 공부(+업무)를 하면서 한 가지 확실하게 배운 것은, 모르는 것이 있을 때는 '공식 문서'를 살펴보라는 것. 대부분의 경우 공식 문서에서 정의, 원리, 원인 등을 찾을 수 있다. 아무튼 Reac..