맨 땅에 프론트엔드 개발자 되기

useEffect 란? React 의 함수형 컴포넌트에서 라이프사이클을 감지하기 위한 HOOK 이다. 처음에 라이프사이클이란 말을 들었을 때, 너무 거창한 단어가 붙어있는 것 같아서 이해가 잘 되지 않았었다. 그러나 React가 CSR(클라이언트 사이드 렌더링) 방식이라는 점을 기억하고 있으면, 렌더링 규칙에 대해 알고 있어야 컴포넌트 제어가 가능하다는 것을 느낄 수 있다. - React 라이프사이클 대표적인 라이프사이클에는 아래와 같은 것들이 있다. 라이프사이클 명 설명 componentDidMount 컴포넌트의 첫번째 렌더링을 마치고 난 뒤 호출되는 메소드다. 이미 컴포넌트가 화면에 나타난 상태이고, 이 시점에 보통 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 이..

Context API 란? Context API는 React에서 16.3 버전부터 공식적으로 제공하는 기능으로 Redux와 비슷하지만, Redux는 '상태(state)'를 관리하는 툴이고, Context API는 React 컴포넌트들끼리 props로 정보를 주고 받지 않고 전역적으로 데이터를 가져다 쓸 수 있게 만든 툴로써 약간 역할이 다르다고 볼 수 있다. Context API 문법 일단 Context API를 사용하기 위해서는 공통 데이터를 사용하는 컴포넌트들의 최상위 컴포넌트에 createContext()를 만들어주어야 한다. 컴포넌트가 위의 사진처럼 구성되어 있을 때, 4번 컴포넌트와 5번 컴포넌트가 공통으로 사용하는 데이터를 전역으로 관리하고 싶으면, 2번 컴포넌트 혹은 그 상위 컴포넌트에 cr..

React 가상 돔(Virtual DOM) React에서는 가상 돔을 사용한다. 이 가상 돔은 실제 DOM(Document Object Model)을 조작하는 방식이 아니라 실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과 비교해서 달라진 부분을 리렌더링 시켜주는 방식으로 작동을 한다. 그런데 이 때 가상 돔을 잘 이해해야만 React의 '상태'를 잘 다룰 수 있다. - Virtual DOM을 사용하는 이유 그렇다면, 왜 실제 DOM을 조작하지 않는지에 대해서 알아보자. Vanilla JS를 이용하여 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 React는 깜박거림 없이 부드러운 UX를 사용자에게 제공하..

REACT 프로젝트 GitHub Pages로 배포하기 1. GitHub 저장소 만들기 우선, GitHub에 repository를 생성해줍니다. 노란색으로 표시한 명령어를 잘 복사해둡니다. 2. 프로젝트에 GitHub 원격 저장소 연동하기 create-react-app 으로 프로젝트를 생성할 경우 자동으로 git init이 되어 버전관리가 되어있지만, 아닐 경우 git init으로 버전관리를 시작해줍니다. 그런 다음, 터미널에 아까 복사해둔 노란색 명령어를 입력 후 엔터를 누르면, 원격 저장소와 프로젝트가 연동됩니다. git remote add origin 원격 저장소 주소 3. GitHub pages로 배포하기 GitHub pages는 gh-pages를 설치해야 사용할 수 있습니다. 설치하기 전에 먼저 ..

Redux 기본 개념과 작동 방식 Redux 란? 상태 관리 라이브러리로 리액트를 사용할 때 상태를 관리하는 것을 도와주는 라이브러리다. 상태 관리를 왜 해야되는가? 에 대해 생각해보면, 리액트에서는 컴포넌트끼리 상태값을 주고 받을 때 props를 통해 주고 받는데, 자식관계가 딥해질 수록 중간 컴포넌트들에 의미없는 props 내려주기가 반복되고, 자식 컴포넌트들끼리 상태값을 직접 주고 받는 것이 불가능하다. (무조건 부모 컴포넌트를 거쳐야만 가능) 그리하여 상태 관리를 쉽게 도와주는 라이브러리들이 생겨났고, 그중에 가장 많이 쓰이는 상태 관리 라이브러리가 Redux 다. Redux는 공통으로 쓰이는 상태 값을 한 곳에 모아 필요한 곳에 뿌려주는 클라우드 개념이랄까? props로 내려주지 않고, 필요한 ..

리액트 React State, Props 리액트를 사용할 때 꼭 알아야 하는 개념인 State와 Props에 대해 알아보자. Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State는 컴포넌트 내부에서 대상의 상태를 나타내는 데이터 State 리액트를 사용하여 개발하는 것과 바닐라 자바스크립트를 사용하여 개발하는 것의 가장 큰 차이는 직접 DOM을 조작하지 않는다는 것이다. DOM을 직접 조작하지 않는 이유 = 리액트를 사용하는 이유 (아래 글 참고) 리액트를 사용하는 이유 (SPA, CSR, SSR) 리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤..