React - props, state

props 

• 상위컴포넌트에서 하위컴포넌트로 물려준 객체 
• 변경되지 않는 값이 props가 되어야 한다.

Tweets란 컴포넌트에 give, newTweet, isRemove란 키로 데이터를 넘겨주고 있다

 

Tweets의 props로 위에서 전달해준 데이터들이 넘어온 것을 확인할 수 있다

 

state

• 컴포넌트내에서 변경될 수 있는 값을 state에 저장한다 
• state값이 변경되면 리렌더링이 일어나서 페이지를 다시 그린다
• state 값을 변경하기 위해서 useState를 사용한다 

state를 설정해 주는 기본 문법

 

각 값들이 state로 저장된 것을 볼 수 있다

 

const [temp, setTemp] = useState('초기값')

//useState를 이용하여 '초기값'이라는 문자열을 temp라는 변수에 할당한다
//temp의 값을 변경하기 위해서는 setTemp를 사용한다 
//setTemp는 temp의 값을 변경해주는 함수이다

 

※state의 값을 변경할 때는 mutable, 즉 원본을 바꾸는 메소드를 사용해서는 안된다!

새로운 객체를 복사하여 state 값을 변경해 줘야 한다 

 

 

새로운 배열을 만들어서 state 값을 바꿔주는 코드

클릭을 누르면

state값이 두 배열이 합쳐진 값으로 바뀌고 리렌더링 한다

현재 state 값

 

push,shift,unshift, pop 등을 사용하면 정상적으로 작동하지 않는 모습을 볼 수 있다.