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

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를 사용자에게 제공하..

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

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

리액트 React 시작하기 (CDN & CRA) 1. CodePen 으로 시작하기 CodePen은 웹에서 코딩을 작성할 수 있는 애플리케이션이다. CodePen에서 시작하는 방법은 실제 프로젝트를 만들 수 있는 방법은 아니고, React를 경험해보거나 간단한 테스트 코드를 실행해볼 때 사용하는 방법이다. CodePen https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io CodePen에 간단하게..

리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤을 것 같다. 그러나 다른 사람들이 다 쓰니까, 인기 있으니까 무작정 리액트를 쓰게 된다면 우리는 리액트가 주는 장점이나 본질을 이해하지 못하고 제대로 사용하지 못 하게 된다. SSR (서버사이드 렌더링) 과 CSR (클라이언트사이드 렌더링) 우선 리액트의 장점을 이해하려면 SSR과 CSR의 개념에 대해서 알아야 한다. 웹문서는 브라우저에 표시되어야 할 정보들을 담고 있다. 이 정보들은 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 개인의 서버(요즘엔 클라우드 서버)에 저..