React Component, props, state 맛보기

react를 사용한 애플리케이션은 다양한 컴포넌트로 구성되어 있다.

요놈들은 단순한 템플릿 기능을 넘어,

데이터가 주어졌을 때 이에 맞춘 UI를 만들어주는 등 다양한 기능들을 붙일 수 있는 것!

---

1. Component

제일 먼저 컴포넌트를 만들 MyComponent.js 파일을 만들어주자.

MyComponent.js

컴포넌트를 생성할 때는 뒤에 extends Component를 붙여줘야!

 

항상 붙어있었던 export 요놈은 다른 파일에서 얘를 import 할 때 사용될 요소를 선언한 것.

 

App.js

App.js의 return에 방금 만든 <MyComponent/>를 적어주면...

와우!

 

2. props

props는 컴포넌트의 속성을 설정할 때 사용하는 요소.

props값은 해당 컴포넌트를 불러와 사용하는(부모 컨포넌트, 여기서는 App.js) 곳에서만 설정이 가능하다.

MyComponent.js

props를 렌더링할 때는 { }로 감싸주면 된다.

this 키워드를 사용해 자기 자신에게 접근하도록!

 

App.js

요 컴포넌트가 사용되는 부모 컴포넌트, 즉 App.js에서 이렇게 설정해주자!

(HTML 태그의 속성 설정과 유사하다)

와우!!!

 

Component.js

부모 컨포넌트에서 props값을 지정하지 않았을 때 띄워줄 기본 값도 설정할 수 있다.

defaultProps를 통해 이렇게 내부에서 props 설정이 가능!

 

App.js

App.js에 아무 것도 적어주지 않았으니 기본 이름 이라고 뜰 테다.

 

컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때는 → propTypes 사용! 소문자임에 유의하자.

PropTypes.string ← 이런 형태로 문자, 숫자 등의 타입을 정해줄 수 있다.

 

필수적으로 넣고 싶다면? isRequired를 붙여주면 그만!

 

App.js

defaultProps로 지정하지 않은 age을 부모 컨포넌트에서 설정!

이때 문자열 이외의 값을 컴포넌트에 전달 시 { }로 감싸야한다.

 

3. state

MyComponent.js

그러...하다....

 

App.js

state를 통해 부모 컴포넌트에서 받아왔다.

 

MyComponent.js

state이니 컴포넌트 자신(여기서는 MyComponent.js)도 수정할 수 있다!

onClick이벤트를 통해 클릭할 때마다 number가 하나씩 증가하도록 설정.

 

와우!!!!!!

 

정석은 constructor 메서드에서 state를 정의하는 것이다.

 

하지만 defaultProps와 propTypes 정의할 때 사용한 transform-class-properties 문법으로(무슨 소리인지... 죄송)

constructor바깥에서도 state를 정의해줄 수 있다.

 

단 이를 업데이트할 때는 언제나 .setState()로만 가능하다는 점!