ref 란?
HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이
바로 ref (reference의 줄임말) 개념이다.
ref는 DOM을 꼭 직접적으로 건드려야 할 때 필요하다.
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
이 ref를 사용하는 상황의 예시이다.
콜백 함수를 통한 ref 설정
ref={(ref) => (this.input = ref)}
this.input은 input요소의 DOM을 가리키게 된다. ref의 이름은 자유롭게 지정할 수 있다.
this. superman = ref 도 가능!
먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 고려한 수 활용하는 것이 중요하다.
map() 함수 문법
arr.map(callback, [thisArg])

const IterationSample = () => { const names = ["눈사람", "얼음", "눈", "바람"]; const nameList = names.map((name) => <li>{name}</li>); return <ul>{nameList}</ul>; }; export default IterationSample;

이렇게 사용하면 하나씩 <li> 눈사람 </li>... 를 하지 않고도 편하게 원하는 결과를 얻을 수 있다.
하지만 아직 완벽하지 않다. "key" props가 없기 때문이다.
key
리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소의 변동이 있었는지 알아내려고 사용한다.
유동적인 데이터를 다룰 때는 원소의 생성,제거,수정 등이 필요한데 key가 있다면 어떤 변화가 일어났는 지 빠르게 알 수 있다.
const IterationSample = () => { const names = ["눈사람", "얼음", "눈", "바람"]; const nameList = names.map((name, index) => <li key={index}>{name}</li>); return <ul>{nameList}</ul>; }; export default IterationSample;
map함수에 전달되는 콜백 함수의 인수인 index 값을 사용하여 key를 설정한 모습니다.
'웹 프론트엔드 > React' 카테고리의 다른 글
리액트를 다루는 기술 #8 Hooks(1) (0) | 2024.02.26 |
---|---|
헷갈리는 React 문법 정리 #1 className을 통한 css 조건부 렌더링 (0) | 2024.02.16 |
리액트를 다루는 기술 #4 이벤트 핸들링 (0) | 2024.02.15 |
리액트를 다루는 기술 #3 컴포넌트 (0) | 2024.02.13 |
리액트를 다루는 기술 #2 JSX (1) | 2024.02.10 |