Headwing

이번주는 리액트 숙련 주차로 다양한 것들을 배웠다. 리액트의 기본적인 훅인 useEffect와 리덕스, 라우터에 대해 배웠다. 그리고 지난 주에 한 과제를 배운 리덕스와 라우터를 적용해 바꿔보며 응용해보았다. 생각보다 일찍 끝나서 코딩애플 강의도 좀 듣고, 마지막 남은 학기 시험도 보고 왔다. 리액트 훅이 나오기 전에는 컴포넌트의 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 한다. 물론 state 관리도 가능했기 때문이다. 클래스형 컴포넌트를 다음과 같이 세밀하게 컴포넌트의 생명주기를 일일히 코드로 설정해주는 방식이다. 라이프 사이클들은 크게 세 가지로 나눌 수 있다. 생성될 때 (마운트 될 때 - mount) constructor, render, componentDidMount ..

1. DOM이란 ? “DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다. ex. element, 문자열, 혹은 코멘트” -MDN- 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 문서를 노드와 객체로 나타냅니다. 위 사진을 보고 HTML이 DOM이라고 생각할 수 있지만 그렇지는 않습니다. IDE에서 작성한 HTML은 DOM이 아니고 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM입니다. 이렇게 하는 이유는 프로그래밍 언어가 페이지와 상호 작용할 수 있게 하기 위해서 입니다. DOM..

Component란? 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 리액트에서 개발하는 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려줍니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요합니다. 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 그렇다면 기존 명령형 프로그..

ref란? HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용한다. 예를 들어 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등 이 있다. 왜 DOM API를 쓰면 안될까? document.getElementsByClassName과 같은 자바스크립트 문법을 쓰는 것..

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 컴포넌트가 real DOM으로 re-rendering이 되기 전에 re-evaluate(재평가)를 거친다. 먼저 새로운 state인 {name: "진도사우르스"}를 가지고 해당 컴포넌트(함수) 재실행(re-run)한다. 그 과정에서 컴포넌트 내부 구조는 모두 재생성(re-creation)하게 된다. 그런 뒤에 react가 변..