티스토리 뷰
컴포넌트에 클릭 이벤트 적용방법
- 컴포넌트에 버튼을 만든다
- onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다
- 주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다
부모 자식 컴포넌트 연결하기
- 값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다
컴포넌트에 props 전달하기
- props란 컴포넌트끼리의 정보 교환 방식이다
- 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다
- props는 반드시 위에서 아래 방향으로 흘러야 한다 부모 -> 자식 방향으로만 전달할수 있다
- props는 반드시 읽기 전용으로만 취급하며, 변경해선 안된다
prop drilling
- prop drilling이란 prop는 무조건 부모에서 자식으로 전달되어야한다
- 손자에게 값을 전해 주기 위해선 중간 컴포넌트를 거쳐 전달되어야한다
- 이것을 prop drilling ( prop 가 아래로 뚫고 내려간다 ) 라고 한다
children문법
state
map, filter 적용하기
컴포넌트 분리
'TIL > React' 카테고리의 다른 글
[리액트 React] 리액트 훅(React Hook) (0) | 2024.01.25 |
---|---|
[리액트 React] 스타일 컴포넌트(Styled Components) 지역,전역 스타일 (0) | 2024.01.24 |
[리액트 React] 투두리스트 TodoList, Jsx문법, 컴포넌트 (0) | 2024.01.23 |
[리액트 React] 투두리스트 만들기(TodoList) (0) | 2024.01.22 |
[리액트 React] 리액트 시작하기 (0) | 2024.01.18 |