230625_WIL

이번주에 한일

REACT에 대해 공부하고 TODOLIST 프로젝트를 만들며 학습

이번주의 핵심

1. 가상 DOM (Virtual DOM) : 가상 DOM은 실제 DOM을 추상화한 것으로, 자바스크립트 객체를 통해 DOM 트리를 표현합니다. 이 방식은 실제 DOM에 바로 접근하는 것이 아니라, 변경사항을 일정 시점에서 한꺼번에 적용하는 것을 가능하게 합니다.

   이 과정은 두 단계로 이루어집니다:

   • Diffing 단계: React는 변경된 내용이 있는지 확인하기 위해 새로운 가상 DOM 트리와 이전의 가상 DOM 트리를 비교합니다.
   • Reconciliation 단계: 실제 DOM 트리는 이전 가상 DOM 트리와 새로운 가상 DOM 트리의 차이를 반영하여 업데이트 됩니다.

   이 방식은 불필요한 DOM 업데이트를 줄이고 성능을 향상시키는 데 도움이 됩니다.

2. props (속성) : props는 "properties"의 약자로, React 컴포넌트에 전달되는 값을 의미합니다. 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 데 사용되며, 이 값들은 자식 컴포넌트 내에서 변경될 수 없습니다.

   예를 들어, UserGreeting이라는 컴포넌트가 있고, 이 컴포넌트를 부모 컴포넌트에서 다음과 같이 사용한다고 생각해 봅시다:

   <UserGreeting name="John" />

   여기서 name은 prop이며, John은 그 prop의 값입니다. UserGreeting 컴포넌트 내에서 this.props.name을 통해 이 값을 읽을 수 있습니다.

3. state (상태) : state는 컴포넌트의 내부 상태를 나타내는 데이터입니다. 이 값은 컴포넌트의 생명주기 동안 변할 수 있으며, state의 변경은 해당 컴포넌트의 재렌더링을 일으킵니다.

   State는 사용자 인터랙션 (예: 버튼 클릭, 텍스트 입력 등) 또는 시간의 경과 (예: 타이머)와 같은 것들에 대응하기 위해 사용되며, 이는 React 애플리케이션의 동적인 행동을 지원합니다.

   예를 들어, 버튼이 클릭될 때마다 숫자가

   1씩 증가하는 컴포넌트를 만들기 위해서는 state를 사용해야 합니다.

   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     incrementCount = () => {
       this.setState({ count: this.state.count + 1 });
     };
   
     render() {
       return (
         <div>
           <p>{this.state.count}</p>
           <button onClick={this.incrementCount}>Increment</button>
         </div>
       );
     }
   }

   여기서 count는 state이며, setState 메서드를 사용해 이 값을 변경하고 있습니다. 이 값이 변경될 때마다, React는 컴포넌트를 재렌더링합니다.

이번주에 느낀점

리액트를 오랜만에 접하니 처음에는 약간 손에 익질 않아서
원하는 대로 구현이 안되서 살짝 고생을 했었지만 양질의 강의덕에
건설적으로 접근하며 천천히 감을 익힐 수 있던 한주였습니다.