[React] 컴포넌트

3.1 컴포넌트 생성

파일 만들기 > 초기 코드 작성하기 > 모듈 내보내고 불러오기

src/MyComponent.js import React, { Component } from 'react'; class MyComponent extends Component{ render(){ return( my first componet ) } } export default MyComponent; // 이 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정

이와 같이 작성된 파일을 다른 파일에서 사용할 수 있다. 다음과 같이

src/App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render() { return ( ); } } export default App;

3.2 props

props : properties 순서 : props 렌더링 > props 값 설정 > props 기본 값 설정 > props 값 검증

src/MyComponent.js import React, { Component } from 'react'; class MyComponent extends Component{ render(){ return( hi my name is {this.props.name} 입니다. // props에 접근 시, this를 사용한다. // 그리고 {}으로 감싸준다. ) } } export default MyComponent;

src/App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render() { return ( ); } } export default App;

기본값 설정하기, defaultProps

MyComponet.defaultProps={name:'홍길동'}

또 다른 방법 : 클래스 내부에서 정의, but ES6 문법에서는 작동하지 않음

src/Mycomponet.js import React, { Component } from 'react'; class MyComponent extends Component{ static defaultProps ={ name: 'man' } render(){ return( Hi my name is {this.props.name} 입니다. ) } } export default MyComponent;

props 검증 : propTypes

props의 타입을 지정할 때, propTypes를 사용한다.

타입을 지정한다고 ?: string이냐, number냐 결정해주는 것 입니다.

지정된 타입 이외의 타입으로 값이 할당되면 오류메시지를 받을 수 있다.

즉, 디버깅에 사용될 수 있다는 뜻이네?

propTypes 종류

array, bool, func, number, object, string

symbol : ES6 문법의 심벌 객체

node : 렌더링할 수 있는 모든 것

element : 리엑트 요소

instanceof(CertainClass) : 특정 클래스의 인스턴스

등등

defaultProps와 propTypes는 작성해주는 게 좋다. 협업 시 easy-to-know-what-it-is를 위해

3.3 state

props는 부모 컴포넌트가 설정한다. 컴포넌트 자신은 해당 props를 read-only로만 사용

어떤 느낌이냐면 자식 컴포넌트를 함수라고 생각하면, 부모 컴포넌트에서 그 함수의 전달인자를 결정하여 전달하는 느낌

컴포넌트 내부에서 write-read 모두 하려면 state를 써야 한다.

그러기 위해서는 언제나 기본 값을 미리 설정해야 함!

this.setState() 메서드로 업데이트 해야 한다.

state 초기값 설정 > state 렌더링 > state 업데이트 순서대로 알아봅시다. state의 초기값은 생성자에서 설정한다. 생성자는 컴포넌트를 새로 만들 때 실행된다. state 값을 업데이트하려면 setState() 메서드를 사용합니다.

src/Mycomponent.js import React, { Component } from 'react'; import PropTypes from 'prop-types' class MyComponent extends Component{ static defaultProps ={ name: 'man' } static propTypes ={ name: PropTypes.string, age: PropTypes.number.isRequired } constructor(props){ super(props); this.state = { number:0 } } render(){ return( Hi my name is {this.props.name} And I am {this.props.age} years old my number : {this.state.number} { this.setState({ number: this.state.number +1 }) } }>addition ) } } export default MyComponent; // onClick 부분 코드 잘 봅시다. ()=> 이런 문법의 의미 알아봅시다. // ES6 문법인 화살표 함수 // 이 문법은 주로 함수를 파라미터로 전달할 때 유용합니다.

constructor에 state를 정의하는 방법 말고, constructor 밖에 정의하는 방법도 있다. state 값을 업데이트할 때 주의 사항

.setState() 메서드로 업데이트 합니다.

setState의 역할은 파라미터로 받은 필드를 업데이트 후, 컴포넌트가 리렌더링!하도록 트리거!하는 것

from http://whilescape.tistory.com/138 by ccl(A) rewrite - 2020-03-06 16:20:40