이번 주에도 역시나 엄청나게 많은 것들을 배웠던 주다. 조금씩 이과적으로 머리를 쓰는 (?) 것에 익숙해지고 이해도가 더욱 높아지는 것이 느껴진다. 다른 분들에 비하면 많이 늦지만 남과 비교하지 않고 계속해서 꾸준히 내 속도로 나아가는 것에 집중하기로 했다. 이번 주도 나만의 방법과 속도로 학습을 진행하였다. React 입문주차 학습은 힘겹지만 그래도 잘 완주하였고, 숙련주차 학습도 현재 잘 진행하고 있다. 우선 숙련주차 학습 강의는 한 번 빠르게 쭉 공부 후, 꼼꼼히 다시 복습하고 있다.
입문주차 수업 정리한 부분은 TIL에 다 적었지만 간단히 배웠던 것들을 살펴보면,
- React에 대해서, ES6 문법, 개발환경 세팅(React)
- CRA(Create React App)
- React Component
- JSX(JavaScript + XML)
- Props, Props Children, Props 추출
- State
- 불변성 & 순수함수
- Component & Rendering
- 실습 (카운터 앱)
- Styling
- 반복되는 컴포넌트 처리하기
- 컴포넌트 분리하기(독립 컴포넌트)이러한 키워드들을 React 입문주차에 배웠다. 그리고 이번에 React 숙련주차에 학습 하는 키워드들은 아래와 같다.
- Styled Components : 소개, 사용, GlobalStyles, Sass 소개, css reset
- React Hooks : ①useState ②useEffect ③useRef ④ useContext(Context API), 최적화(⑤React.memo ⑥useCallback ⑦useMemo)
- LifeCycle : 클래스형 컴포넌트에서의 라이프사이클 이해하기
- DOM과 Virtual DOM
- Redux : Redux 설정, 소개, 설정
- Redux : 카운터 프로그램 만들기, 카운터 프로그램 만들기2
- Redux : Refactoring - action creators, action values
- Redux : Payload 및 Ducks 패턴
- Redux : TodoList Refactoring 실습
- React Router Dom : 소개, hooks, children, Dynamic Route, useParam
- 비동기 프로그래밍 입문
- REST(Path Variable vs Query Parameter)
- JSON이란?(NoSQL 데이터 설계를 위한 기초지식)크게 Styled Components, React Hooks, Redux, 비동기 프로그래밍과 JSON 등을 학습한다. 특히나 React Hooks와 Redux를 중점으로 학습해볼 예정이다.
이번에는 학습 방법을 조금 다르게 해 보았다. 빠르게 한번 쭉 모든 강의를 공부해보았고, 다시 하나하나 자세히 학습을 하고 있다. 숙련 학습 1주차 강의들을 들어본 느낌은 전 보다 더 고차원적이고 복잡해지고 양이 많아진 것을 확실히 느낄 수 있었다. 입문주차 학습도 만만치 않았지만, 이번에는 더 정신차리고 학습을 열심히 해 나가야겠다고 깨달았다. 특히나 Redux같은 경우 중요성에 대해서 귀가 아프도록 들었고 그 어려움 역시 많이 들었다. 이번에 학습 할 때는 이 부분은 더욱 신경써서 이 다음 주차 학습에 큰 도움이 되도록 제대로 이해하고 공부해가야 할 것이다.
마지막으로 입문주차 학습에서, 그 중에서도 많이 중요한 부분들을 다시 한 번 간단히 짚고 숙련주차로 확실히 넘어가보자. 1.props, 2.state, 3.component 이 세가지는 숙련주차 학습때도 가장 기본이 되는 개념이다.
1.props
"properties"의 줄임말로, 컴포넌트 간 데이터를 전달하는 데 사용된다. 각 컴포넌트는 자체적인 상태(state)를 가질 수 있지만, 다른 컴포넌트에서 전달된 데이터(props)를 사용하여 출력 결과를 변경할 수도 있다.
예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면, 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 속성을 전달할 수 있다. 자식 컴포넌트는 전달된 속성(props)을 받아들이고 이를 이용해 출력 내용을 변경할 수 있다.
2.state
React 컴포넌트 내에서 관리되는 데이터의 일종이다. State는 컴포넌트가 렌더링될 때 변경되거나 업데이트되는 데이터를 저장하는 데 사용된다. 컴포넌트가 상태(state)를 변경할 때, React는 자동으로 해당 컴포넌트를 다시 렌더링하여 변경된 상태를 반영한다.
3.Component
쉽게 말해서 하나의 블록이라고 생각하면 좋겠다. 블록을 쌓아서 하나의 건물을 만들듯 컴포넌트를 쌓는다. 즉, UI를 생성하기 위한 독립적인 모듈이다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
'
그리고 이번 주 부터 숙련주차 학습을 본격적으로 하기 전, 하나의 개념은 정확히 이해하고 짚고가면 좋을 거 같다. 바로 DOM과 Virtual DOM인데, 사실 아직까지 완벽히 이해하지는 못했지만, 개념을 정리해보도록 하겠다. 이번 정리 후에도 이 개념들은 몇번 더 나의 TIL 혹은 WIL에 지속적으로 등장할 것 같다. 그만큼 React를 효율적으로 사용하기 위해서는 이 부분에 깊은 이해가 필요하다. (그렇다고 한다...)
이번 강의에도 해당 강의 준비가 되어있고, 자료들도 있다. 이미 강의를 보며 학습을 하였지만, 다시 한번 자세히 들여다 볼 예정이므로, 이번에는 요즘에 논란(?)이 되고 있는 Chat GPT를 사용하여 해당 개념을 정리해보겠다.
-DOM (ChatGPT)
DOM은 Document Object Model의 약어로, HTML, XML, SVG 등의 문서를 구성하는 요소들을 객체 형태로 표현하는 모델입니다.
웹 브라우저는 HTML 문서를 불러와 해석하고, 이를 화면에 렌더링합니다. 이때, 문서의 각 요소들은 브라우저에서 객체로 인식되어 처리됩니다. 이 객체들을 모델링한 것이 바로 DOM입니다.
DOM은 HTML 문서의 모든 요소들을 트리 형태로 구성합니다. 문서의 최상위 노드는 document 객체이며, 그 아래에는 HTML 요소들이 들어갑니다. 각 요소는 노드 객체로 표현되며, 이들 노드 객체는 서로 계층적으로 연결됩니다.
웹 페이지의 내용이 변경되면, 브라우저는 이를 DOM을 통해 즉시 반영합니다. 이를 통해 웹 개발자는 자바스크립트를 이용해 DOM을 조작하거나 수정할 수 있으며, 이를 통해 동적인 웹 페이지를 만들 수 있습니다. 하지만, DOM 조작은 브라우저의 성능에 영향을 미치므로, 최소한의 조작만을 수행하는 것이 좋습니다.
-Virtual DOM (ChatGPT)
React에서 Virtual DOM은 React의 핵심 요소 중 하나로, 효율적인 UI 렌더링을 가능하게 하는 기술입니다.
Virtual DOM은 브라우저의 실제 DOM과 유사한 구조를 가지고 있으며, React 엘리먼트의 가상 표현입니다. 이를 이용하여 React는 UI 업데이트를 위해 필요한 최소한의 작업만 수행하고, 브라우저에서 DOM 요소를 직접 조작하는 것보다 훨씬 빠르고 효율적인 방식으로 UI를 업데이트할 수 있습니다.
React에서 UI 업데이트가 발생하면, React는 Virtual DOM을 사용하여 브라우저에 실제로 렌더링될 DOM 요소를 생성합니다. 이때, React는 이전 상태의 Virtual DOM과 새로운 상태의 Virtual DOM을 비교하여 변경된 부분을 식별합니다. 그리고 변경된 부분만 브라우저의 실제 DOM에 업데이트합니다.
이러한 과정에서 React는 최소한의 DOM 조작만 수행하므로, 불필요한 렌더링을 방지하고 성능을 향상시키는 데 도움이 됩니다. 또한, Virtual DOM은 다른 브라우저와 호환되는 일관된 결과를 제공하므로 React 애플리케이션의 이식성도 높아집니다.
-Virtual DOM과 DOM의 차이점 (ChatGPT)
React의 Virtual DOM과 일반적인 DOM 간에는 몇 가지 차이점이 있습니다.
첫째, 일반적인 DOM 조작은 브라우저에서 실제로 요소를 조작하므로, 브라우저에서의 성능에 직접적인 영향을 미칩니다. 반면, React의 Virtual DOM은 브라우저의 실제 DOM을 조작하기 전에 가상 DOM을 조작하므로, 브라우저에서의 성능에 덜 영향을 미칩니다.
둘째, React의 Virtual DOM은 UI 업데이트가 발생하면 변경된 부분만 실제 DOM에 적용하므로, 최소한의 DOM 조작만 수행합니다. 이를 통해 불필요한 렌더링을 방지하고 성능을 향상시킵니다. 반면, 일반적인 DOM 조작은 변경된 부분만 조작할 수 없으므로, 전체 DOM을 다시 렌더링해야 합니다.
셋째, React의 Virtual DOM은 다른 브라우저와 호환되는 일관된 결과를 제공합니다. 반면, 일반적인 DOM 조작은 브라우저마다 다르게 동작할 수 있습니다.
마지막으로, React의 Virtual DOM은 일반적인 DOM보다 좀 더 복잡하고 추상적인 개념입니다. 이를 이해하기 위해서는 React의 생명주기와 엘리먼트의 구조 등을 이해해야 합니다. 반면, 일반적인 DOM은 HTML, CSS, JavaScript 등의 웹 개발 기술들에 대한 이해만 있으면 이해할 수 있습니다.
'
정리를 해서 적어볼까 하였지만, 아직까지 뭐가 중요한지 아닌지 정확히 판단하기 힘들다고 생각해서 그대로 적어보았다. 그런데 생각보다 너무 친절히, 이해하기 쉽게 알려주지 않는가?? 내가 예상한 것 보다 더욱 쉽고 잘 설명해주어서 놀랐다. 이제부터 Chat GPT도 학습할 때 같이 이용을 해 보아야겠다. 사실 강의를 보거나 학습자료들을 봤을 때 이해가 안 되거나, 덜 되는 부분들이 많았는데, 같이 이용을 해보니 엄청나게 도움이 되는 것 같다.
다음 주 부터는 더욱 거친 항해길이 기다릴 것 같은 느낌이 들지만, 묵묵히 가다보면 나의 목적지에 도달하지 않겠는가. 더한 힘든 길도 많았는데, 나약해지지 말고 나의 방법으로 속도로 꾸준히 가도록 해보겠다.
못한다고 계속 못하지도 않을 것이고, 잘 한다고 계속 잘하지도 않을 것이다. 인생이 어디 그렇게 재미없게 예측가능하게 흘러 가던가? 지금 이 순간에 일희일비 하지 않고 겸손하게 그러나 자신감있게 해보자.
