이번 주 목표
리액트 체크리스트 완벽히 이해하기 (달성)
리액트 훅 공부하기 (달성)
과제 (Lv.2 Lv.3) 달성하기 LV.2(달성)
규칙
1. 억지로 쓰지 않기.
- 진짜 배운 게 있는 날만 쓰기!
2. 양 신경쓰지 않고 기록하기.
- 양이 적다고 글을 포기하지 말고 조금이라도, 그게 한두줄이더라도 배운 게 있다면 기록하기!
3. 꼭 내 것으로 만든 후 작성하기.
- 스스로 생각을 좀 정리해본 후 TIL 글 적기!
- 남이 쓴 글 복붙 X , 내가 배우고 느낀 점 위주로. (일단은 그렇게 해보자)
밑의 내용들은 내가 수업중에 메모해가며 적은것들이고 이를 통해 다시한번 공부가 되어 올렸으며 적으면서 복습이 되기 때문에 그날 공부한 것들은 안 외우더라도 매번 적을 예정입니다.
<오늘 공부 한 것들>
1. 리액트 훅 공부
2. 리액트 체크리스트 공부
3. FireBase 공부
<인상 깊은 것들>
[FireBase]
프론트 엔드가 백엔드랑 작업을 하지 않고 혼자서 기초 사이트를 만드는데 도움을 주는 사이트
백엔드와 협업을 할 경우 기능들에 대해서 많은 이야기를 나눠야 하지만 FireBase는 혼자서 공부하는데 큰 도움을 주는것 같다.
[체크리스트와 훅]
리액트의 기본 개념과 원리 "가상 돔(Virtual DOM)"
리액트는 자바스크립트의 라이브러리이며 SPA 기반 프론트 엔드 개발 프레임워크이며 컴포넌트 단위의 독립적인 블록을 사용한다. 가상 DOM은 실제 DOM을 그대로 복사하여 변경된 요소를 한꺼번에 반영하는 방법이다.
리액트에서 자주 사용되는 자바스크립트 필수 문법 중 "비구조화 할당에 대해 설명해주세요.
비구조화 할당은(구조분해 할당)을 의미하며 배열, 객체, 함수안에 있는 속성을 개변 변수에 담는 표현식
CRA(Create React App)를 사용하여 개발 환경을 구축하는 방법에 대해 설명해주세요.
yarn 혹은 npm으로 create react app으로 하여 기초적인 리엑트 프로젝트에 필요한 요소를 자동으로 구성해주는 방법이다. (yarn create react-app 파일명)
‘부모 컴포넌트’와 ‘자식 컴포넌트’ 사이에서 데이터를 전달하는 방식에 대해 설명해주세요.
props를 통해 필요한 데이터를 props의 요소에 넣어가지고 필요한 데이터를 보내거나 가져온다. 파일을 받아 올때는 import를 사용하고 보낼 파일은 export를 사용한다.
JSX 문법이 무엇이지, 일반 HTML 문법과는 어떤 차이가 있는지 설명해주세요.
javascript의 모든 기능이 있으며 react element를 생성하기 위한 문법이다. HTML문법은 자바스크립트 파일에서는 사용이 못해서 자바스크립트에서 입력을 하여 html에 파일을 보내 가독성이 좋게 하는게 목적이다.
리액트에서 ‘Props’와 ‘State’의 역할과 차이점에 대해 설명해주세요.
Props은 컴포넌트끼리 데이터를 전달하는 역할이며 State는 컴포넌트의 값이 변경되면 변경된 상태에 따라 자동으로 화면을 업데이트 하는 것이다.
불변성(Immutability)의 원칙과 순수 함수의 개념 및 역할에 대해 설명해주세요.
불변성이란 메모리에 있는 값을 변경할 수 없는 것 원시 데이터(숫자, 문자열, 불린형)은 불변성이 있고,
객체, 배열, 함수는 불변성이 없다. 리액트의 역할은 state의 변화(메모리 주소)에 따라 렌더링을 하는데 직접 수정을 하면 값은 바뀌지만 주소의 변화는 없어서 렌더링이 되지 않는다.
순수함수란 하나 이상의 인자를 받고, 인자를 변경하지 않고 참조하여 새로운 값을 반환하는 함수 리액트에서 컴포넌트의 렌더링 결과는 상태(state)에 의존하고, 상태가 변경되면 다시 렌더링되는 동작이 발생합니다. 이 때 순수함수를 사용하면 상태 변경의 추적과 예측이 용이해진다
반복되는 컴포넌트를 처리하고 분리하는 방법에 대해 설명해주세요.
반복되는 컴포넌트를 함수, 배열, 객체 중 하나로 따로 만들어서 분리하고 필요할 때마다 모듈을 가지고 와서 적용한다.
독립 컴포넌트를 작성하고 타 프로젝트에서 재사용하는 방법에 대해 설명해주세요.
독립 컴포넌트로 작성을 하고 Git이나 npm레지스트리에 등록을 하여 타 프로젝트에서 사용할 컴포넌트를 import하여 사용한다.
참고 자료
SPA: 한 개의 페이지로 이루어진 어플리케이션, 서버에 1회의 리소스를 하고 필요할 때, 데이터만 받아와서 수정하고, 깜빡임(서버로부터 렌더링)이 없다.
SPA 컴포넌트: 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X(이걸 렌더링이라고 해요)
가상 DOM
<클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면>
실제 DOM: 5번의 화면 갱신 필요
가상 DOM: Batch Update로 인해 단 한번만 갱신 필요