#중앙정보처리학원-66일차-

11/03

오늘은 어제 차크라ui를 배우고 이후에 계속 react를 배우게 되었다.

 

# chakraUi 의 태그 내부 children props 

porps 를 구조 분해 할당 하여 받을때 children은 태그 내부에 내용을 전달 받게 된다.

recat에서 다음과 같이 사용 하면 

태그 내부의 값을 잘 출력된 것을 볼 수 있다.

 

 

# function(함수)를 props로 전달

작성한 함수도 props로 전달 받아 사용이 가능하다.

 

 

 

 

# PreventDefault 

기본으로 해야할 일을 막고싶을때에  사용

 

 

노란색의 원래 기능은 input창에 검색어를 넣으면 다음의 검색 내용 페이지로 이동 하지만 

preventDefault()를 사용 하여 작동 하지 않게 하고 콘솔창만 나오게 한 것이다.

윈래 기능은 a태그를 클릭 하였을때 다음 페이지로 이동 하는 거였지만 preventDefault로 

네이버 페이지로 이동하게 하였고 이때에 js 코드에 location.href를 사용 하였는데 error 가

발생하였다 이것을 해결 하기 위해 window를 앞에 붙여 사용 하였다.

 

 

#Event.stopPropagation

event bubbling 이벤트가 발생하면 감싸고 있는 것들까지 이벤트가 발생 하게 되는 현상이 생긴다.

이럴때에 안에 있는 버튼이 클릭되었을때에 밖에 감싸고 있는 태그들이 영향을 안받게 하고 싶을때
사용한다. 

 

# Componenet 의 re-render

component에서 re-render가 되려면 state(상태)가 변경이 되어야 re-render를 실행 한다.

state는 react가 관리하는 component의 값을 이야기 하고 state의 변경을 얻기 위해선
useState(); 를 사용 하면 변경 상황을 얻을 수 있다. 

 

useState() 는 배열을 리턴하고 배열의 0번 index는 현재의 state를 1번 index는 
state를 변경 할 수도 있는 메소드를 갖고 있다, 그리고 useState()의 괄호 안에는 초기값을 
넣어주면 된다.

 

 

 

 

 

 

 

 

 

 

 

# DOM

웹페이지에서 자바스크립트 또는 프로그래밍 언어들이사용 될수 있게 추상화 시키는것

document가 가장 상위에 있기 때문에 어디서든 불러와서 사용이 가능하다 

현제 document의 상태를 크롬의 개발자 도구에 element에서 볼 수 있다.