23.02.03-23.02.09 주특기 입문 주차 / React, 시험
주간 일정
2월 3일(금) ~21시 S.A과제 회원가입 html 만들고텍스트, 배포
2월 9일(목) 10시-12시 입문주차 퀴즈
2월 9일(목) ~21시 개인 입문주차 과제 제출(todo) / 2월 8일 완료
2월 9일(목) ~21시 팀 과제 노션 작성 제출
1주차 개념복습
자체적으로 질문을 만들어 개념을 복습해보자.
Q1. 컴포넌트와 컴포넌트화에 대해서 내가 알고 있는 부분을 설명해주세요
- 컴포넌트 : 재사용이 가능한 각각의 독립된 모듈
레고와 같이 각각의 블록들로 하나의 조형물을 만들 수 있다.
리액트에서 볼 수 있는 뷰를 돔객체, 뷰영역 등으로 나누어 구성하는 것을 컴포넌트화한다고 부른다.
Q2. props와 state가 무엇이며 어떻게 활용되는지 적어주세요
- props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다. (함수의 매개변수 처럼)
- state : 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다. (함수내에 선언된 변수처럼)
Q3. 리액트에서 렌더링이란? 렌더링과 리렌더링이 발생하는 방법/순서에 대해 적어주세요
리액트에서 렌더링이란 사용자 화면에 View(내용)를 보여 주는 것
(컴포넌트가 현재 props와 state상태에 기초해 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업)
[작업방식]
리액트내에서 데이터가 업데이트되거나, 변경사항이 생기면 전체 UI를 가상돔에 리렌더링 한다
⬇️
이전 가상돔에 있는 내용과 비교한다. (diffing)
⬇️
변경된 부분을 한번에 실제 돔에 적용한다.
리액트에서 뷰(View)를 업데이트할 때는 "업데이트 과정을 거친다" 보다는 "조화 과정을 거친다"라고 표현하는 것이 더 정확하다. 이유는 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실 새로운 요소로 갈아 끼우기 때문이다.
컴포넌트가 다시 렌더링 되는 경우 (컴포넌트 상태가 변하는 경우)
1. 자신의 상태가 변경될 때
2. 부모 컴포넌트가 리렌더링 될 때
3. 자신이 전달받은 props가 변경될 때
4. forceUpdate 함수가 실행될 때
Q4. 가상돔은 무엇이며, 왜 사용하고 어떻게 작동되는지 적어주세요
Virtual DOM이란, 실제 DOM에 접근해 처리, 조작하는 대신 가벼운 사본을 하나 만들어 이곳에서 이용하게 만든 개념을 의미한다.
[작업방식]
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.
2. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교한다. 이 과정을 "diffing"이라고 한다.
3. 그러고 나서, 바뀐 부분만 실제 DOM에 적용한다.
실제 존재하는 DOM을 자주 조작하면 속도 저하, 버그발생, 브라우저 다운 등과 같이 성능에 영향을 주기 때문에 이를 개선하고자 Virtual DOM을 사용하게 되었다.
※ DOM자체는 빠르고, 읽고 쓸때의 성능은 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않음.
※ 단, 웹브라우저에서 DOM에 변경사항이 있을시, 웹브라우저가 다시 HTML,CSS를 연산하고, 레이아웃을 구성하고, 페인트를 하는 과정에서 많은 시간이 허비되며 성능 저하가 발생
Q5. 생명주기 메서드(LifeCycle Method)는 무엇인지 간단하게 적어주세요
생명주기 메서드는 컴포넌트가 브라우저 상에 나오고, 업데이트되고, 사라질때 호출되는 메서드를 의미하며,
클래스형 컴포넌트에서만 사용가능하다.
회고
테스트는 이미 제출한 todo를 더 간단하게 구현하는 방식이라 어렵지는 않았다
※ 단, VScode내에서 github 업로드시 주소를 꼭 확인해야 한다!
1주차때 학습했던 관련 개념 정리를 질의응답 방식으로하니, 어떤 질문이 좋을지도 생각해보고 질문에 대한 답을 찾아보며 한번 더 공부할 수 있는 방식인것같다.
