티스토리 뷰

컴포넌트에 클릭 이벤트 적용방법

  • 컴포넌트에 버튼을 만든다
  • onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다
  • 주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다   

 

부모 자식 컴포넌트 연결하기

  • 값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다

 

 

컴포넌트에 props 전달하기

  • props란 컴포넌트끼리의 정보 교환 방식이다
  • 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다
  • props는 반드시 위에서 아래 방향으로 흘러야 한다 부모 -> 자식 방향으로만 전달할수 있다
  • props는 반드시 읽기 전용으로만 취급하며, 변경해선 안된다

 

 

 

prop drilling

  • prop drilling이란 prop는 무조건 부모에서 자식으로 전달되어야한다
  • 손자에게 값을 전해 주기 위해선 중간 컴포넌트를 거쳐 전달되어야한다 
  • 이것을 prop drilling ( prop 가 아래로 뚫고 내려간다 ) 라고 한다

 

 

 

children문법

children 활용1
children 활용2

 

state

onClick 이벤트
onChange 이벤트

 

map, filter 적용하기

 

컴포넌트 분리

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함