[리액트를 다루는 기술] 3 컴포넌트

* 김민준 저자님의 <리액트를 다루는 기술> 책을 보고 정리해 놓은 글입니다. 가볍게 일독을 마친 상태이고 모르는 부분 위주로 정리하고 구글링을 해서 도움이 되는 자료를 정리하겠습니다.

* 작성하다 날아감. 슬픔이 +1 추가되었음.

1. props 값 설정 및 검증

1) props 랜더링

2) props 값 설정

3) 기본값 설정

4) 값 검증하기

2. JSX에서 props 값 랜더링

- {this.props.name}

3. 컴포넌트를 사용할때 props 값을 설정

- <MyCompnent name = "React"/>

4.props 기본값 설정

1) 해당 컴포넌트에 작성

- MyComponent.defaultProps = {

name: "기본값" }

2) 클래스 내부에서 정의

- static defaultProps = {

name = "기본값"}

5. props 검증

-  import PropTypes from "prop-types'; 호출

1) 클래스 밖에서 설정

-    MyComponent.propTypes = {

name: PropTypes.string }

2) 클래스 내부 

- static proppTypes = {

name :  PropType.string }

3)  isRequired: 필수적으로 값을 넣어야 하는 경우

- age: PropTypes.number.isRequired

6. state

- props는 부모 컴포넌트가 설정

- 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용

- 읽고 업데이트하는 값은 state

- this.setState() 매서드로만 값을 업데이트 해야함

7. state 설정 및 업데이트

1) state 초기값 설정

2) state 랜더링

3) state 없데이트

8. 컴포넌트의 생성자 매서드: constructor()

- constructor(props) {

super(props) } 

- component 클래스 상속

- 따로 constructor 매서드를 만들어 주지 않으면 component 클래스 생성자 매서드를 사용

- this.props.name, this.props.age, this.state.number

9. state 값 업데이트 하기

-this.setState 로 업데이트

10. arrow가 function을 대처 할 수 없는 이유

- 용도가 다르다.

- 가리키고 있는 this 값이 다르다.

- function()에서 this는 자신이 종속된 객체를 가르킴

- arrow()에서 this는 자신이 종속된 인스턴스를 가르킴

- 종속된 객체  vs 종속된 인스턴스

 

11. 오브젝트 vs 클래스 vs 인스턴스

객체(Object)는 소프트웨어 세계에 구현할 대상이고, 

이를 구현하기 위한 설계도가 클래스(Class)이며, 

이 설계도에 따라 소프트웨어 세계에 구현된 실체가 인스턴스(Instance)이다. 

객체(Object)는 현실의 대상(Object)과 비슷하여, 상태나 행동 등을 가지지만, 소프트웨어 관점에서는 그저 콘셉에 불과하다. 

소프트웨어에서 객체를 구현하기 위해서는 콘셉 이상으로 많은 것들을 사고하여 구현해야 하므로, 이를 위한 설계도로 클래스를 작성한다. 

설계도를 바탕으로 객체를 소프트웨어에 실체화 하면 그것이 인스턴스(Instance)가 되고, 이 과정을 인스턴스화(instantiation)라고 한다. 실체화된 인스턴스는 메모리에 할당된다. 

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"