1. 반복 태그 -> 컴포넌트
- input처럼 반복적인 써야 되는 태그들을 그냥 사용하게 되면 내용이 길어지고 가독성이 떨어진다.
- 이럴 때 그 태그들을 컴포넌트로 따로 빼서 import 해주는 식으로 하면 더 간단해지게 된다.
- 그리고 그 태그에 관련된 속성들을 props로 전달시켜줘서 속성들도 또한 맞게 사용하면 된다.
- 밑에 사진처럼 위치에 따라 만든 컴포넌트에 내용들에 더해서 더 필요할 수도 있고 아닐 수도 있다.
- 이럴 때는 삼항연산자를 이용해서 넘어온 props가 있냐 없냐로 나눠서 필요한 태그를 넣어줄지 아니면 그냥 빈값을 넣어줄지 하면 된다.
2. 반복 태그 -> 컴포넌트 - onClick 사용
- 반복적인 태그에서 onClick을 통해서 클릭한 것에 표시를 해야 할 때가 있다.
- 그럴 때는 컴포넌트에 props로 onClick을 받는 방법이 있다.
- 위 사진은 여러 개의 태그가 반복되는 상황에서 클릭하면 버튼 밑에 파란선을 나타나게 하는 코드이다.
- state를 하나 선언을 해서 각 버튼을 눌렀을 때 그 버튼에 맞는 숫자로 setState를 해준 다음 삼항연산자를 이용해 그 버튼 숫자와 state가 같다면 className에 active를 추가하게 해서 버튼 밑에 파란선을 나타나게 해준다.
- 똑같은 형태의 태그가 반복되므로 위 사진 처럼 컴포넌트를 선언해서 좀 더 간단하게 만든다.
- 이 때 props로 그 컴포넌트에 대한 숫자(id)와 지금 현재 state(active)와 onClick 함수(setActive)를 받아온다.
- 이제 버튼을 누르게 되면 먼저 컴포넌트 안에 있는 onClick 함수인 onClickButton이 실행이 되고 그 함수 안에는 props에서 받아온 onClick 함수가 실행이 된다.
- 그러면 props에서 받아온 함수는 setActive이므로 state(active)를 변경시켜준다.
- 그럼 이제 삼항연산자를 이용해서 props에서 받아온 클릭한 컴포넌트에 대한 숫자(id)와 onClick해서 바뀐 state(active)가 같으면 className에 active를 추가해서 버튼 밑에 파란선을 그리게 만들고 같지 않다면 그냥 공백을 className에 더해준다.
'FrontEnd > React.js' 카테고리의 다른 글
[React] prettier와 eslint (0) | 2022.12.16 |
---|---|
[React] TailwindCSS (1) | 2022.11.03 |
[React] SCSS, styled-components (0) | 2022.11.03 |
[React] CSS, Image, className, 반복 요소 렌더링, list 복사 (0) | 2022.10.28 |
[React] 리액트 훅(React Hooks) (0) | 2022.10.27 |