리액트를 다루는 기술 #5 ref ~ #6 map() 함수

2024. 2. 16. 17:18·웹 프론트엔드/React
목차
  1. ref 란?
  2. 콜백 함수를 통한 ref 설정
  3. map() 함수 문법
  4. key

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
  1. ref 란?
  2. 콜백 함수를 통한 ref 설정
  3. map() 함수 문법
  4. key
'웹 프론트엔드/React' 카테고리의 다른 글
  • 리액트를 다루는 기술 #8 Hooks(1)
  • 헷갈리는 React 문법 정리 #1 className을 통한 css 조건부 렌더링
  • 리액트를 다루는 기술 #4 이벤트 핸들링
  • 리액트를 다루는 기술 #3 컴포넌트
JYUN_
JYUN_
예비 개발자 성장기록
  • JYUN_
    데브 스토리
    JYUN_
  • 전체
    오늘
    어제
    • 분류 전체보기 (88)
      • AWS & 클라우드 컴퓨팅 (1)
        • AWS (2)
      • AI & ML (17)
        • 딥러닝 (3)
        • 인공지능 기초 (2)
        • 자연어 처리 (3)
        • 컴퓨터 비전 (8)
      • CS 지식 (9)
        • 알고리즘 (1)
        • 자료구조 (4)
        • 지식확장 (1)
        • 컴퓨터 네트워크 (3)
      • 백엔드 (22)
        • Node.js (12)
        • Spring (9)
      • 웹 프론트엔드 (21)
        • HTML (3)
        • React (7)
        • 바닐라 JavaSctipt (11)
      • 코딩 테스트 & 문제 해결 (10)
        • 코딩 테스트 연습 (9)
        • 실전 문제 풀이 (1)
      • 트러블 슈팅 (1)
      • 기타 (4)
        • 개인 지식 관리 (1)
        • 외부 활동 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
JYUN_
리액트를 다루는 기술 #5 ref ~ #6 map() 함수
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.