react - 2

Container Presenter 패턴

Container

• 데이터를 갖고, 상태를 갖으며 api를 불러온다

Presenter

• 데이터를 보여주는 역활
• 상태값, api, 등을 갖고 있지 않음, 단지 함수형 컴포넌트

방식

• index.js, AContainer.js, APresenter.js 를 생성

1. index.js : AContainer를 export 해준다.
2. AContainer.js : 상태를 갖은 모든 리엑트 컴포넌트
3. APresenter.js : 컨테이너에 export 당하며, 화면을 보여주는 로직 구성.

withRouter

• Router는 Route 들에게 match,history, location 정보를 주는 props을 기본적으로 제공한다.
• 단 헤더에서 라우터에서 정보를 얻고 싶다면 withRouter로 감싸주어야한다.

parseInt

	parseInt("1234") // 1234
 	parseInt("asb") -> Nan
    
    if(isNan(parseInt("asc") // true

child props

• 예약된 react props

	<Component>{child}</Component>
	const Section = ({title, children}) => ()

children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),

input

in Container

<form onSubmit={submit}>
	<input
	value={value}
	onChange={update}
	/>
</form>

• input 에 value를 적어줘야 js로 통신할 수 있다.

in Presenter

const submit = (event) => {
   event.preventDefault();
}

const update = (event) => {
	const value = event.target;
    this.setState({ contect : value});
}

• form 을 관리하는 함수는 매개변수로 event를 받고 preventDefault 메서드를 실행해 줘야지만 , 새로고침이 안된다. 새로고침을 해버리면 전에 받은 state가 날라가 버린다
• react에서 input을 받기 위해선 input을 처리하는 함수에서 매개변수로 event를 받고, event.target.value를 받아 setState를 호출하여 value들을 ex) contect 에 넣어줘야한다.

helmet

$ npm i react-helmet

• head의 정보를 수정할 수 있다.

<Helmet><title></title> </Helmet>