Portfolio

이벤트 핸들러는 클릭, 마우스오버, input에 초점 맞추기 등과 같은 사용자 상호작용에 반응하여 촉발되는 자체 함수를 의미합니다.

컴포넌트 별 메모리를 state라 합니다.

훅들은 컴포넌트가 React 기능을 사용할 수 있게 해주는 특수한 함수들.

리액트에서 렌더링을 해야 컴포넌트는 화면에 표시됩니다.

*’렌더링’이란 React가 컴포넌트, 즉,함수를 호출한다는 뜻. 해당 함수에서 반환하는 JSX는 시간상 UI의 스냅샷. prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 사용해 계산

과정 예시:

렌더링 발동 (예시: 식당의 주문을 주방으로 전달)

컴포넌트 렌더링 (주방에서 요리)

DOM에 커밋(테이블에 요리 제공)

Trigger → Render → Commit

리렌더링

React가 함수를 다시 호출합니다.

함수가 새로운 JSX 스냅샷을 반환합니다.

그러면 React가 반환한 스냅샷과 일치하도록 화면을 업데이트합니다.

업데이터 함수를 전달하면, 여러 state 업데이트를 큐에 넣어야 할 때 유용 ex) setState( s ⇒ s+1)

코드에서 객체를 복사하는 것이 지루하다면 Immer와 같은 라이브러리를 사용하여 반복되는 코드를 줄일 수 있습니다. 하지만, … 를 이용해 객체 복사도 가능합니다.

JavaScript에서 배열은 변경 가능하지만 state에 저장할 때는 변경이 불가능한 것으로 취급해야합니다. 객체와 마찬가지로, state에 저장된 배열을 업데이트하려면, 새로운 배열을 만들고(또는 기존 배열을 복사본을 만듬) 새 배열을 사용하도록 state를 설정해야합니다.

arr[0] = 'bird'와 같이 배열 내부의 항목을 재할당해서는 안 되며, push() 및 pop()과 같이 배열을 변이하는 메서드도 사용해서는 안 됩니다.

state의 원래 배열에서 filter() 및 map()과 같은 비변이 메서드를 호출하여 새 배열을 만들면 됩니다. → 자주 사용

기존 항목과 끝에 새 항목을 포함하는 새 배열 만들기. 이 작업을 수행하는 방법은 여러 가지가 있지만 가장 쉬운 방법은 ... 배열 전개 구문을 사용하는 것입니다


setArtists( 
// Replace the state  [ // with a new array    ...artists, // that contains all the old items 
   { id: nextId++, name: name } // and one new item at the end  ]);

다음과 같이, 추가한 내용과 함께 새로운 배열을 생성할 수 있습니다.


배열에 삽입하기

const nextArtists = [
// Items before the insertion point:
...artists.slice(0, insertAt),
// New item:
{ id: nextId++, name: name },
// Items after the insertion point:
...artists.slice(insertAt)
];


배열 항목 교체 

import { useState } from 'react';

let initialCounters = [
	0, 0, 0
];

export default function CounterList() {
	const [counters, setCounters] = useState(
	initialCounters
);

function handleIncrementClick(index) {
	const nextCounters = counters.map((c, i) => {
		if (i === index) {
		// Increment the clicked counter
		return c + 1;
		} else {
		// The rest haven't changed
		return c;
		}
});
setCounters(nextCounters);
}

return (
<ul>
	{counters.map((counter, i) => (
		<li key={i}>
		{counter}
			<button onClick={() => {
			handleIncrementClick(i);
			}}>+1</button>
		</li>
	))}
</ul>
);
}

리렌더링을 통하여, 각각의 숫자를 화면에 업데이트 할 수 있습니다.

지역 변수는 렌더링 간에 유지되지 않습니다.

지역 변수를 변경해도 렌더링을 발동시키지 않습니다.

useState

The state variable (index) with the value you stored.

The state setter function (setIndex) which can update the state variable and trigger React to render the component again.

useState의 state 변경 시 과정

컴포넌트가 처음 렌더링됩니다. index의 초기값으로 0을 useState에 전달했으므로 [0, setIndex]가 반환됩니다. React는 0을 최신 state 값으로 기억합니다.

state를 업데이트합니다. 예를 들어, 사용자가 버튼을 클릭하면 setIndex(index + 1)를 호출합니다. index는 0이므로 setIndex(1)입니다. 이렇게 하면 React는 이제 index가 1임을 기억하고 다음 렌더링을 촉발합니다.

컴포넌트가 두 번째로 렌더링됩니다. React는 여전히 useState(0)을 보지만, index를 1로 설정한 것을 기억하고 있기 때문에, 이번에는 [1, setIndex]를 반환합니다.

이런 식으로 계속됩니다.

동일한 컴포넌트를 두 군데에서 렌더링하면 각 사본은 완전히 격리된 state를 갖게된다. (독립적)

상호작용 추가하기