Container Presenter 패턴
Container
- 데이터를 갖고, 상태를 갖으며 api를 불러온다
Presenter
- 데이터를 보여주는 역활
- 상태값, api, 등을 갖고 있지 않음, 단지 함수형 컴포넌트
방식
- index.js, AContainer.js, APresenter.js 를 생성
- index.js : AContainer를 export 해준다.
- AContainer.js : 상태를 갖은 모든 리엑트 컴포넌트
- APresenter.js : 컨테이너에 export 당하며, 화면을 보여주는 로직 구성.
withRouter
- Router는 Route 들에게 match,history, location 정보를 주는 props을 기본적으로 제공한다.
- 단 헤더에서 라우터에서 정보를 얻고 싶다면 withRouter로 감싸주어야한다.
parseInt
parseInt("1234")
parseInt("asb") -> Nan
if(isNan(parseInt("asc")
child props
<Component>{child}</Component>
const Section = ({title, children}) => ()
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
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
<Helmet><title></title> </Helmet>