항해99 4주 차 WIL

항해 4주 차를 마치며

한 주는 가벼워 보이지만, 한 달은 무게감이 느껴진다.
항해를 시작하고 4주, 한 달이 지난 시점 시작할 때를 돌아봤을 때,
나는 얼마나 개발자에 가까워졌을까,
한 달 전 개발에 완전히 문외한이던 것에 비하면,
그래도 지금은 배우고 있는 언어를 조금은 읽을 수 있고,
주특기로 선택한 React를 기본적인 영역에서 이해해 가고 있다.

특히나 주특기를 Node.js에서 React로 변경한 것은 아주 만족스럽다.
Node.js 입문을 배우고 있을 때 난이도가
너무 어려워서 그런가 하는 생각이 들 정도로 학습이 잘 안되었는데,

그때 계속 고민하고 눈이 가던 React로 옮긴 후
막힘없는 학습을 이어갈 수 있었는데,
난이도가 아닌 관심, 흥미의 차이였던 것이다.

두 달 같은 한 달을 보내고 있지만 그렇다고 후회가 없는 것은 아니다.
항해를 시작하기 전 주 100시간이라는 슬로건에 따라
후회 없는 99일을 만들어가고자 했지만,
돌이켜 보면 이때는 이렇게, 저 때는 저렇게 했으면 좋았을걸 하는 후회가 남는다.
이런 후회를 8주 차 회고에서는 느끼지 않도록 더 꽉 찬 4주를 만들어야겠다.

주 학습 내용

1. Virtual DOM

React의 핵심 기술 중 하나로, DOM(Document Object Model)을
직접 조작하는 대신, React는 가상 DOM을 사용하여
UI를 더 빠르고 효율적으로 업데이트한다.
구조는 실제 DOM과 완전히 일치하며, 브라우저 메모리 상에만 존재하고,
실제 DOM 과는 완전히 별개이다.

React는 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다
가상 DOM을 다시 만들어 이전과 비교하여
변경된 부분을 찾아 실제 DOM에 반영하는데,
이 과정은 실제 DOM보다 빠르기에 React는 더 높은 성능을 제공할 수 있다.

즉, 리-렌더링을 최소화 하며, 성능을 최적화할 수 있는 기능으로 볼 수 있다.

2. State

React에서 state는 컴포넌트 내부에서 관리되는 데이터를 의미한다.
컴포넌트가 렌더링 되는 동안 상태(state)는 변경될 수 있으며,
이에 따라 컴포넌트가 다시 렌더링 된다.
state는 컴포넌트가 가지고 있는 데이터 중에서도
변할 수 있는 데이터를 의미하며,
사용자 인터페이스(UI)와 관련된 데이터를 일반적으로 저장한다.

기존에는 State를 사용하기 위해서 클래스형 컴포넌트를 주로 사용했지만,
함수형 컴포넌트에 Hook이 추가되면서
이제는 주로 함수형 컴포넌트를 사용한다고 한다.

    //State의 기본적인 선언 방법은 위와 같다.

   const [todo_list, setTodo_list] = useState([]);
   const [title, setTitle] = useState("");
   const [comment, setComment] = useState("");
   // 변수를 선언하며, 그에 대응하는 State를 쌍으로 선언하고, 우측에 초기값을 설정한다.

항해 1주 차에서는 간단하게 몽고DB를 사용하여,
데이터를 관리했다면, React를 배우면서는 State를 통해서만
화면에 표출되는 값을 바꿀 수 있는 점이 인상적이었다.

금요일부터 시작된 React 숙련 주차에서는 useState 말고도,
여러 Hook을 배우고 있는데, 저마다 필요한 상황도 다르지만,
결론적으로는 리-렌더링을 최소화하여 성능을 최적화 시키는 목적이다.
앞으로의 React 학습에서는 데이터의 흐름을
어떻게 잘 읽느냐가 관건이라고 생각된다.

3. Props

React에서 Props는 부모 컴포넌트에서
자식 컴포넌트로 데이터를 전달하는 데 사용되고,
Props는 컴포넌트의 속성(Property)을 의미하며,
일반적으로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미한다.

props는 컴포넌트에 의해 변경될 수 없는 읽기 전용 데이터이며,
컴포넌트는 props를 전달받아 사용할 뿐, 직접 변경할 수는 없다.
부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는,
자식 컴포넌트를 JSX 태그로 감싸고, 속성값으로 props를 전달한다.
즉, 자식 컴포넌트는 부모 컴포넌트에서 내려주는
Props만 사용할 수 있는 것이다.

우선은 컴포넌트의 부모 - 자식 관계에 대해서 이해가 필요했다.
코드의 가독성, 유지 보수성을 높이기 위해 컴포넌트를 분리하는데,
이때, 분리된 컴포넌트를 어떻게 불러오냐에 따라
부모 - 자식 컴포넌트가 나누어진다.
말로만 보면 부모, 자식, 내려준다 등 전부 생소하지만,
오히려 코드로 보면 더 직관적이다.

   import ToDoBox from './ToDoBox'
   // 파일을 완전 분리 했으므로, ToDoBox를 호출하고자 할때, import가 필요하다.

   const ToDoArea = ({ todo_list, doneButtonHandler, removeButtonHandler }) => {
     return (
       <div className="todoarea">
         {todo_list.map((item) => (
           <ToDoBox key={item.id} item={item} doneButtonHandler={doneButtonHandler} removeButtonHandler={removeButtonHandler} />
         // 부모 컴포넌트인 ToDoArea는 자식 컴포넌트인 ToDoBox를 호출하고 있다.
         // 이때, props로 key, item, 함수를 내려주고 있다.
         ))}
       </div>
     )

   const ToDoBox = ({ item, doneButtonHandler, removeButtonHandler }) => {
     // 부모 컴포넌트가 내려준 props를 인자로 받는다.
     return (
       <div className="todobox">
         <div className="todo_comment">
           <h4>
             <b>{item.title}</b>
           </h4>
           <br />
           <h5>{item.comment}</h5>
         </div>
         <div className="todo_button">
           <button
             type="button"
             className="btn btn-outline-success"
             onClick={() => doneButtonHandler(item.id)}
           >
             성공
           </button>
           <button
             type="button"
             className="btn btn-outline-danger"
             onClick={() => removeButtonHandler(item.id)}
           >
             삭제
           </button>
         </div>
       </div>
     );
   };

   export default ToDoBox;
   // ToDoArea에서 사용할 수 있도록 export 해주어야 한다.

위 코드는 분리한 내용 중 일부만 가져왔는데,
위 코드 중 부모 컴포넌트 ToDoArea는
App의 자식 컴포넌트로 필요한 인자를 받고 있는 중이다.

React를 배우면서 지속적으로 강조되는 것이
리-렌더링의 최소화와 가독성, 유지 보수 등의 측면이다.

이번 주의 회고는 이것으로 마치고,
배운 개념들을 짤막한 글이라도 하나씩 붙여,
이번에 새로 개설한 깃블로그를 가득 채우고 싶다.
이번 주도 열심히 한 나를 칭찬하자.