[React] 익히기 1

이벤트 버블링 현상

리액트에서 이벤트는 상위 Html 로 퍼진다.

예를 들어

span 태그를 누르더라도 그 위에 있는 h4 태그, div 태그 까지 눌려지는 이벤트 버블링 현상이 발생한다.

 

sol) 이벤트 버블링 현상을 막고 싶다면, 이벤트 작성하는 공간 안에 e.stopPropagation() 을 추가하여 작성하면 된다.

 

 

input 안의 내용을 어떻게 하면 볼 수 있을까?

 

보기 전, 해당 데이터를 저장해놓아야 한다.

어디에다 저장을 해 놓을까?

 

 

보통 변수 /state 안에 저장해둔다.

state 변경함수는 비동기 함수로서 늦게 처리되기 때문에 console 창에서 늦게 처리가 되어진다.

(input 안에 입력 시에 콘솔 창에서 두 글자를 작성해야 한 글자가 작성되어지는  것을 볼 수 있다.)

 

리액트에서 동적인 UI 만드는 법

 

let [modal, setModal] = useState(' ');

(' ') 안에 UI 상태를 입력하면 됨.

 

리액트 UI 만드는 방법

 

1. 전등을 이쁘게 달아놓기

2. 스위치(state)와 연결하기

3. 스위치를 on으로 놓으면 - 켜지고, off 로 놓으면 - 꺼지도록 만들어 놓기

4. 나중에 필요하면 스위치 조작만 하면 된다.