React state 원리와 props

이전에 useState에 대해 정리한적이 있다.

 

오늘은 useState를 사용할때 반드시 이해해야 할 부분을 확인하려고 한다.

 

useState :

기존에 useState를 사용해서 변수를 만들고 HTML이나 JS에 적용시킬 수 있었다.

 

useState를 아래와 같이 선언했다.

wirter와 title, contents의 input을 onChange로 이벤트가 발생할 때마다 값을 불러오고있다.

 

그럼 writer와 tilte contents가 한글자씩만 입력되어도 isActive가 반응하여

버튼의 색상을 yellow로 변경시켜야 하는데,

한글자씩만 입력되면 색상이 변하지않고 한번 더 입력해야 색상이 변경된다.

 

이것은 useState의 실행 방식때문이다.

 

1. 화면 다시 그리그

2. 임시저장공간을 활용한 값 변경

 

useState는 함수안에서 실행시 또 변경된 값이 있을 수 있으니, 임시저장공간에 저장한다.

함수가 끝날때까지 변경되지 않으면 임시저장공간에 있는 변경값을 화면에 다시 불러온다.

 

그래서 event를 감지하는 함수안에 writer의 값을 바로 적는것이 아닌 값이 추가되자마자 함수를 바로 실행시키기 위해 아래 처럼 변경해야 한다.

 

writer -> event.target.value

 

또한 여기서 props라는 값을 이용하여 button에 isActive를 실행시켰다.

props는 무엇일까?

"한마디로 정리하면 부모가 자식에게 줄 수있는 데이터" 이다.

 

리액트에서 하나의 .js 를 .container.js / .presenter.js / .queries.js / .styles.js 로 분리하여 import해서 진행하였다.

이때 

 

이때 props를 사용해서 부모의 함수를 자식에게 전달해 줄 수 있었다. 

props는 부모가 자식에게만 줄 수 있는 단방향이므로 주의해야한다.