패스트캠퍼스 챌린지 22일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

2022. 2. 14. 10:13공부/패스트캠퍼스

수강 인증샷


패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.


22일차

 22일차에는 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 05. State 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 05. State 강의에서는 앞선 강의에서 설명했던 props에 기초하여 시작한다. 앞선 props에 대해 설명할 때 props는 읽기 전용이어야 하므로 항상 동일한 입력값에 대해 동일한 결과를 반환하는 순수 함수처럼 모든 React 컴포넌트는 자신의 props를 순수 함수로 다루어야 한다. 하지만, 애플리케이션 UI는 동적이며 시간에 따라 변하기 때문에 React 컴포넌트는 state를 통해 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.라는 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있다. 또한, 함수 컴포넌트에서 클래스 컴포넌트로 변환하는 과정과 클래스 컴포넌트와 함수 컴포넌트 클래스로 변환하는 과정을 State 개념을 통해 변환한다. 함수에서 클래스로 변환하는 방법은 1. React.Component를 확장하는 동일한 이름의 ES6 클래스를 생성한다. 2. render()라고 불리는 빈 메서드를 추가한다. 3. 함수의 내용을 render() 메서드 안으로 옮긴다. 4. render() 내용 안에 있는 props를 this.props로 변경한다. 5. 남아있는 빈 함수 선언을 삭제한다.


본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 


패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC