React - map
- map을 사용하면 배열 데이터를 좀 더 효율적으로 그릴 수 있다
- 배열.map((요소, 인덱스)=> {retrun (html요소 사용가능)})
- 요소는 고유한 값을 가지는 key가 필요한데 고유한 값이 없다면 인덱스를 사용해도 된다. 다만 인덱스는 최후의 수단이라는 점을 잊지말아야함!
- props로 전달한 배열 데이터를 map에 사용할 경우 props가 전달되지 않으면 오류가 발생한다. 때문에 ? 연산자를 사용해 데이터가 전달되는 경우에만 실행되도록 설정해주어야한다
- 아래는 예시코드로 arr이 있으면 map으로 name과 age를 출력한
export function Comp1(props) {
const {arr} = props;
return (
<>
{arr?.map((el, index)=>{
return(
<div key = {index}>
<div>el.name</div>
<div>el.age</div>
<div/>
)
})}
</>
)
}React - filter
- filter는 조건을 통과하는 요소만 모아 새로운 배열을 생성한다
- 배열에서 원하는 값을 삭제하거나 검색하는 등의 기능을 구현할 수 있다
- arr.filter((el)=>{return el.age>3}) => 3보다 큰 age를 가지는 요소만 반환한다
- 위와 같은 사용들은 배열을 state로 설정하여 filter로 값을 변경하는 등의 방식으로 사용할 수 있다
- 아래 코드는 filter를 사용하여 input창에 입력된 텍스트를 포함하는 user의 이름을 검색하고 해당하는 user만으로 구성된 리스트를 만든다. 그리고 searchList라는 state에 새로운 리스트를 넣는다
//작성자검색
const newList = list.filter((user) => user.name.includes(inputText));
setSearchList(newList);React - ref
- ref는 요소를 선택하기 위한 한 방법이다. 기존의 id로 요소를 선택하는 방식은 컴포넌트가 재사용되는 react의 특성 상 유일한 값을 가지지 못하기 때문에 id가 중복된다는 문제가 있지만 ref는 컴포넌트 내부에서만 작동하여 그러한 문제를 해결할 수 있다
- 동일한 컴포넌트를 재사용 해도 각 컴포넌트 내부에서만 작동한다
- 값 변경 시 렌더링 되지 않는다(State는 렌더링됨)
- 원래 class컴포넌트에서만 제공되는 기능이었지만 현재는 함수형 컴포넌트에서도 사용이 가능해졌다
- 함수형 컴포넌트에서 ref의 사용법
1) ref객체 생성
//import필요
const myRef = useRef();2) 선택하려는 요소에 ref지정
<input type=text ref={myRef}>안녕하세요우</input>3) 선택한 실제 요소에 접근
myRef.current.focus();- dom요소 선택 외에도 로컬변수로 사용될 수 있다
