📌 map()을 이용한 반복
arr.map(callback, [thisArg])- callback
- 새로운 배열의 요소를 생성하는 함수
- 3개의 인수(currentValue, index, array)를 가질 수 있음
- currentValue : 처리할 현재 요소
- index : 처리할 현재 요소의 인덱스
- array : map()을 호출한 배열
- [thisArg]
- callback 함수에서 사용할 this 객체
- 생략 가능함
📣 with 배열
- 배열 데이터를 효율적으로 그리기 위해 사용
{arr.map((element, index) => {
return <div key={index}>{element}</div>;
})}- key
- 기존 element와 업데이트 element를 비교하는데 사용되는 속성
- 다른 요소와 겹치지 않는 고유한 값이어야 함 → 배열의 요소 중 고유한 값(id 등)이 존재하지 않는다면 index로 사용 가능함! (최후의 수단)
- map()으로 컴포넌트 생성 시, 사용 권장 → React는 업데이트 전 기존 요소와 업데이트 이후 요소를 비교하는데 key 사용
📌 filter()를 이용한 필터링
filter()의 인자로 넘겨지는 callback 함수의 조건을 통과하는 요소를 모아 새로운 배열을 생성하는 함수
- filter()를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능
let words = ['dog', 'cat', 'rabbit'];
let result = words.filter((word) => {
return word.includes('a');
});📌 ref
📣 요소 선택
🟠 HTML
- id 지정 후 요소 호출
<div id="id1"> 내용 </div>🟠 React
React 컴포넌트가 아닌, HTML Element에 직접 접근해야 할 경우
- id 지정
- 같은 컴포넌트를 반복해서 사용하면 id가 중복되는 문제 → 고유한 id가 되지 않음
- ref 사용
- 컴포넌트 내부에서만 작동
📣 ref
Reference
- 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용
- 동일한 컴포넌트를 반복하여 사용해도 각 컴포넌트 내부에서만 동작 → 중복 X
- DOM을 직접적으로 건드려야 할 때 사용
- ex) 특정 input에 focus 주기, 스크롤 박스 조작 등
- 클래스형 컴포넌트에서만 기본 기능으로 제공
// HTML 요소의 레퍼런스를 ref prop에 저장
<element ref={myRef}></element>📌 Ref 사용하기
📣 함수형 컴포넌트
🟠 useRef()
- 용도 1) DOM 요소에 접근
- document.querySelector()와 비슷
import { useRef } from 'react';
const RefSample = () => {
// 1. ref 객체 만들기
const inputRef = useRef();
const handleFocus = () => {
// 3. useRef()로 만든 객체 안의 current가 실제 요소를 가리킴
inputRef.current;
// 3-1. 상기 객체의 current 값에 focus() DOM API 사용
inputRef.current.focus();
};
return (
<>
// 2. 선택하고 싶은 DOM 요소에 ref props 설정
<input ref={inputRef} />
<button onClick={handleFocus}>버튼</button>
</>
);
};
export default RefSample;- 용도 2) 로컬변수로 사용
- 로컬변수는 랜더링 되어도 값이 그대로 유지 → ref 안의 값이 변경되어도 컴포넌트는 랜더링되지 않음
import { useRef } from 'react';
const RefSample = () => {
const idRef = useRef(1);
const plusIdRef= () => {
idRef.current += 1;
console.log(idRef.current);
};
return (
<div>
<p>{idRef.current}</p>
<button onClick={plusIdRef}>PLUS Ref</button>
</div>
);
};
export default RefSample;📣 클래스형 컴포넌트 - 참고용
🟠 콜백 함수
- 사용하고자 하는 DOM 요소에 ref라는 콜백 함수 작성 및 props로 전달
- ref를 컴포넌트의 멤버 변수로 설정하는데, 이때 ref는 원하는 대로 사용 가능
- this.input을 this.orange로 사용해도 무관
import React from 'react';
class RefSample extends React.Component {
handleFocus = () => {
this.myInput.focus();
};
render() {
return (
<>
<input
ref={(ref) => {
this.myInput = ref;
}}
/>
<button onClick={this.handleFocus}>focus</button>
</>
)
}
}
export default RefSample;🟠 내장 함수 createRef
- React.createRef()를 이용해 컴포넌트 내부에서 변수에 ref 요소를 담아줌
- 이때 만든 input 요소는 실제 DOM 요소의 prop에 연결해야 함
- 사용할 때는 this.input.current 이용
import React from 'react';
class RefSample extends React.Component {
// 컴포넌트 내부에서 변수에 React.createRef()를 담기
inputRef = React.createRef();
handleFocus = () => {
// ref 설정 후, DOM 접근을 위해서는 this.inputRef.current까지 접근
this.inputRef.current.focus();
};
render() {
return (
<>
{/* ref props 사용해서 ref 설정 */}
<input ref={this.inputRef} />
<button onClick={this.handleFocus}>focus</button>
</>
);
}
}
export default RefSample;📌 Life Cycle
📣 라이프 사이클 (수명 주기)
모든 React Component에 존재하는 것
- Mount : DOM이 생성되고 웹 브라우저 상에 나타남
- Update : props 혹은 state가 바뀌었을 때 업데이트 함
- Unmount : 컴포넌트가 화면에서 사라질(제거될) 때
📌 Life Cycle 이해하기
📣 함수형 컴포넌트
🟠 useEffect()
- 함수형 컴포넌트에서는 useEffect()를 사용해 Mount, Update, Unmount 시 특정 작업 처리
useEffect(effect, deps);- effect : 랜더링 이후 실행할 함수 (Mount, Update)
- effect 함수에서 함수를 return시 반환하는 함수가 컴포넌트 Unmount 될 때 실행됨
- deps : 배열 값이 변하면 effect 함수 실행
// 컴포넌트 Mount or Update 될 때 동작
useEffect(() => {});
// 컴포넌트 Mount 될 때 동작
useEffect(() => {}, []);
// data 값이 Update 될 때 동작
const [data, setData] = useState();
useEffect(() => {}, [data]);📣 클래스형 컴포넌트 - 참고용
🟠 각 상황별 호출되는 메서드
모든 메서드를 완벽히 알 필요 X
- mount
- constructor
- render
- componentDidMount
- update
- componentDidUpdate
- unmount
- componentWillUnmount
자아를 찾아 떠나는 중,,,