회사가 너무해

회사에서 프로젝트 유지관리 업무 인수인계를 받고 있는 중이다.
근데 아뿔싸 난 앵귤러로만 프로젝트를 진행했었는데 과거 프로젝트는 리액트네?
회사에서 하라는데 해야지 뭐....

오늘은 뭐배웠냐?

React 컴포넌트 배웠어요

앵귤러랑 비슷하기는 하네

import React,{Component} from 'react'
class Counter extends Component{
	render(){
    	return (...html 내용들...)
    }
}

앵귤러가 html,css,ts 세개로 나뉘어 져서 @Component에 값 설정해주는 거라면 여기서는
render함수에 리턴값에 html요소를 정의하면 알아서 나오네?
신기하다.

props이랑 children배움

이제 저기서 부모 컴포넌트로 부터 값 받아오려면 그냥 this.prop만 쓰면 된다니

import React,{Component} from 'react'
class Counter extends Component{
	{var1,var2...} = this.props
    render(){
    	return (...html 내용들...)
    }
}
Counter.defaultProps={
	변수들
}<=이걸로는 부모로 부터 값을 받지 않을시 설정될 초기값을 설정해줄 수 있다니

이것만 해주면 엘리먼트에 <Counter var1 = {1},var2 = {3}...><//Counter>이렇게 값을 넣어줄수 있다. 거기에 저 태그 사이의 값은 props에 들어가 있어서 {var1,var2,...,children}으로 태그 사이의 값을 가져올 수 있다.

PropTypes

저 코드에서 var1이 부모로 부터 입력되지 않아도 오류가 없는데

import React,{Component} from 'react'
import PropTypes from 'prop-types'
class Counter extends Component{
    render(){
		{var1,var2...} = this.props
    	return (...html 내용들...)
    }
}
Counter.defaultProps={
	변수들
}<=이걸로는 부모로 부터 값을 받지 않을시 설정될 초기값을 설정해줄 수 있다니
Counter.propTypes={
	var1:PropTypes.string,
    var2:PropTypes.number.isRequired<=꼭 있어야하는 값
}

이렇게 props의 필수 값들을 지정하여 값이 없을시 오류가 발생하게 할 수 있다니 신기할 따름이다.

근데 저 props값들은 부모 아니면 못 바꾼다.

State랑 SetState

근데 State로는 가능함!
일단 state사용하려면 두가지 방법이 있는데

constructor(props){
	super(props);
    this.state={
    	자식이 사용할 변수들
    }
}

이렇게 해주거나 클래스 안에다가

state = {
	var1:value...
 }

이렇게 해주면 된다.
난 두번째 방법을 할거임
이 값을 바꿔주려면

this.setState({var1:newvalue});

해주면 업데이트 된다. 근데 이것 말고 더 좋은 방법이 있다. 함수로 해줄 수 있다.

this.setState((prevState,props)=>{
	return {prevState.var1 : props.value};
})

prevState는 변경전 state를 의미하며 props는 위에서 언급된 부모로
부터 온 변수를 의미한다. props는 생략 가능!

함수로 해주는 이유는 첫번째 방법으로 하면 state에 있는 var1이 재깍재깍 동기화가 되지는 않는다... 그래서 바로바로 동기화가 가능하게 this.state에