React#5

juyeong-s·2021년 5월 15일
0

React

목록 보기
5/8

전달 받은 props를 직접 바꾸는 것은 불가능하다.
state는 setState함수로 변경가능
Component내부적으로 state를 쓰고, 외부에서 props를 통해 Component를 제어한다. -->props를 통해 값 전달.

<TOC data={this.state.contents}> //data라는 props를 통해 content값을 전달한다.

상위 컴포넌트가 하위 컴포넌트에 명령할 때,

props를 통해 값을 전달해 내부의 state를 바꾸고

하위 컴포넌트가 상위 컴포넌트에 명령할 때,

상위 컴포넌트 안에 이벤트를 심어서 그 안에 setState로 값을 바꾼다.

클릭 했을 때 다른 컴포넌트가 출력되게 하는 법

if(this.state.mode === 'create'){
_article = <컴포넌트 title={_title} desc={_desc}></컴포넌트>
}
{_article} //여기서 <컴포넌트>의 내용이 출력됨.

state에 데이터를 추가하는 방법

contents.push();
로 해도 되지만 push는 contents의 원본 자체가 추가된 데이터까지 포함해서 바뀌게 된다.
var result = contents.concat(); 
를 활용하면 result에만 추가된 데이터가 포함되고 contents는 원본 그대로 유지되기때문에 concat를 사용하도록!!
profile
frontend developer

0개의 댓글