Just Do IT!

Class Component 더 이상 주류는 아니다. 그러나 함수 컴포넌트와 hook을 같이 쓰는 것이 주류가 되기 이전에는 클래스 컴포넌트만 사용했고 그만큼 리액트의 동작 원리를 이해하는데 도움을 준다 추후 입사한 회사에서 클래스 컴포넌트를 사용할 수 있는데, 그 때 코드를 읽고 분석할 줄 알아야 한다. Mount 1. constructor (생성자) 컴포넌트를 만들 때 처음으로 실행되며 초기 state를 정할 수 있다 // class class Example extends React.component { constructor(props) { super(props); this.state = { count: 0 }; } // Hooks const Example = () => { const [count, ..

Redux가 필요한 이유 순수 리액트 개발 방법의 한계 사용하지 않는데 넘겨주기 위해 전달받는 문제 발생 (prop drilling) 전달 받아야 할 중간 컴포넌트가 많아지면 그 컴포넌드들을 전부 바꿔줘야 한다 여러 곳에서 수정되는 state ☞ 어디서 잘못되었는지 찾기 어렵다 Redux가 필요한 이유 props가 복잡하다 퍼져있는 state, 버그 발생 시 책임 소재 파악의 용이성 기존에 state를 변경/참조하는 곳이 여러곳일 때 오류 핸들링의 어려움 증가 Redux에서는 state를 변경하는 방법을 Redux에서만 관리한다 이를 통해 자체적인 문서가 되고 문제 발생 시 원인을 빠르게 찾을 수 있다 Redux의 흐름 이해하기 UI (컴포넌트) → Dispatch 기존에 많은 곳에서 참조하고 관리되었던..

컴포넌트 꾸미기 (CSS-in-JS) CSS-in-JS 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 styled-components : 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 styled-components 준비하기 VSCode 플러그인 : vscode-styled-components 설치 styled-components 설치하기 # npm을 사용하는 경우 npm install --save styled-componetns # yarn을 사용하는 경우 yarn add styled-components styled-components 사용하기 예제 // src/App.js import React from "react"; // styled-compon..

리액트 소개 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스(User Interface, UI) : 사용자와 컴퓨터가 서로 상호작용하기 위해 중간에서 서로간의 입력과 출력을 제어해주는 것 사용자 인터페이스를 위한 라이브러리 = UI 라이브러리 (화면을 만들기 위해 모아놓은 것) Angular.js, React, Vue.js 등 웹사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요하다. 리액트의 장점 빠른 업데이트(화면이 바뀌는 속도) & 렌더링 속도 ⇒ Virtual DOM 사용 화면 업데이트 = DOM이 수정된다 업데이트할 최소한의 부분만 update한다. Component-Based 모든 페이지가 컴포넌트로 구성되어..

React란? SPA란? Single Page Application 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시 사용자가 페이지를 다시 로딩할 필요가 없어진다. Virtual DOM DOM (Document Object Model) : HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것 어떤 DOM 요소를 변경하게 되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그린다. DOM 요소의 변화 레이아웃 단계 : DOM 요소의 변화 이후 요소들의 위치를 계산 페인트 단계 : 새로운 화면을 다시 그리는 단계 Virtual Dom : 실제로 랜더링 되지..