<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> Velopert's Modern React

</aside>

목차

배열을 컴포넌트에 반영해보기 (기본)

• map 메소드를 활용하여 일반 배열의 요소들을 리액트 엘리먼트로 이루어진 배열로 변환해준다.
• 요소별로 고유한 key props를 설정해주어야 한다. 보통 'id' 형태로 배열에 반영해주지만, 고유한 값이 없다면 map 메소드의 두번째 인자인 index 요소를 자동으로 설정한다.

	const users = [
		{
			id: 1,
			username: "kim",
			email: "[email protected]"
		},
		{
			id: 2,
			username: "kim",
			email: "[email protected]"
		},
	]

	return (
		<div>
			{users.map(user => (
				<User user={ user } key={ user.id } /> 
				// key 값이 고유한 id로 가지는 것을 알 수 있다.
			)}
		</div>
	)

useRef 확장해서 사용해보기

useRef는 컴포넌트 안에서 '조회', '수정' 할 수 있는 변수를 관리하는 목적으로 사용할 수 있다. 중요하고도 혁신적인 것은 useRef로 관리하는 변수는 값이 바뀐다고 해서 리랜더링이 일어나지 않는다는 점이다. 위의 코드에서 새로운 항목으로 추가되는 유저 정보의 'id' 값을 ref로 관리해보자.

App.js

	const nextId = useRef(4);
	// -> useRef를 사용할 때 안에 인자로 값을 넣어주면 이 값이 .current의 기본값이 된다.

	...
	
	onCreate = () => {
		...
		nextId.current += 1;
	}

setState의 기능을 이용해서 배열에 값 추가, 제거, 수정하기

추가하기

user에게 받은 정보를 바탕으로 배열의 state를 수정하기 위해서는 기본적으로 배열을 useState로 상태관리 해야 한다. 다음으로는 들어온 정보를 배열에 한 요소로 넣어주어야 하는데, 여기서 우리는 '배열의 불변성'을 잘 지켜야 한다. ...spread operator 기법이나 concat 같은 메소드를 활용해주면 된다.