패스트캠퍼스 환급챌린지 49일차 미션 (3월 20일) : 인터랙티브 웹 강의 후기

서론

오늘날의 웹 개발 트렌드는 빠르게 변화하고 있으며, 새로운 기술이 지속적으로 등장하고 있다. 그럼에도 불구하고, 기본이 되는 지식과 기술은 시간이 지나도 그 가치를 잃지 않는다. 예를 들어, React는 함수형 컴포넌트와 Hooks의 사용을 적극 권장하지만, 클래스형 컴포넌트를 이해하는 것도 중요하다. 이는 기존 코드베이스를 이해하고 수정할 수 있게 해주며, JavaScript의 깊은 이해를 도와준다. 오늘은 'State 추가하기'와 'super(props)'에 대한 두 강의를 통해 클래스형 컴포넌트의 기초를 탐구해보고자 한다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: 리액트 기초 강의 - State 추가하기
• 두 번째 강의: 리액트 기초 강의 - super(props)

첫 번째 강의: 리액트 기초 강의 - State 추가하기

이 강의에서는 클래스형 컴포넌트 내에서 state를 정의하고, 사용하는 방법을 배웠다. state는 컴포넌트의 상태를 저장하는 객체로, 사용자의 상호작용에 따라 동적으로 컴포넌트가 변경되어야 할 때 유용하게 사용된다. 아래는 강의에서 배운 기본적인 state의 사용 예시이다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          카운트 증가
        </button>
      </div>
    );
  }
}

이 코드에서는 카운터의 현재 값을 표시하고, 버튼을 클릭할 때마다 카운트를 증가시키는 간단한 예를 보여준다. 이를 통해 state의 기본적인 사용 방법과 상태 변경을 위한 setState 함수의 사용법을 이해할 수 있었다.

두 번째 강의: 리액트 기초 강의 - super(props)

두 번째 강의에서는 클래스형 컴포넌트에서 super(props)의 사용법과 그 중요성에 대해 배웠다. super 키워드는 부모 클래스의 생성자를 호출하는 데 사용되며, React 컴포넌트에서는 이를 통해 부모 클래스인 React.Component의 생성자를 호출한다. 이 과정은 클래스형 컴포넌트가 올바르게 초기화되고 props를 사용할 수 있게 하는 필수 단계이다.

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: `안녕하세요, ${props.name}님!`
    };
  }

  render() {
    return <h1>{this.state.message}</h1>;
  }
}

이 예시에서는 super(props)를 호출함으로써, 생성자 내에서 부모 클래스의 기능을 올바르게 상속받아, props.name을 사용하여 상태를 초기화하는 방법을 보여준다. 이를 통해 props와 state의 관계를 이해하고, 클래스형 컴포넌트에서의 상태 관리 방법에 대해 더 깊이 이해할 수 있었다.

결론

함수형 컴포넌트와 Hooks가 대세인 현 시점에서 클래스형 컴포넌트를 학습하는 것은 다소 구식으로 느껴질 수 있다. 그러나 기존의 많은 프로젝트들이 여전히 클래스형 컴포넌트를 사용하고 있으며, JavaScript와 React의 근본적인 이해를 돕는 중요한 개념들을 담고 있다. 오늘 배운 'State 추가하기'와 'super(props)' 강의를 통해, 어려움 속에서도 이러한 중요한 개념들을 한 단계씩 이해해 가는 과정을 경험했다. 이러한 학습이 향후 더 나은 개발자로 성장하는 데 도움이 될 것이라 확신한다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N