리액트 강좌

5-1.State

카운터

컴포넌트가 독립된 부품이 되려면 외부에서 전달하는 속성을 표시하는 것 외에도 능동적인 동작을 할 수 있어야 한다. 이를 위해 다음 두 가지 능력이 더 필요하다.

▶이벤트 처리 : 사용자의 조작에 반응하여 능동적으로 동작해야 한다.

▶상태 기억 : 사용자가 입력, 조작한 내용을 계속 유지해야 한다.

예를 들어 쇼핑몰의 상품 컴포넌트라면 사용자가 클릭할 때 이벤트를 받아 장바구니로 들어가는 동작을 해야 한다. 한번 장바구니에 넣어 놓은 상품은 빼 내지 않는 한 자신이 선택받은 상태라는 것을 기억해야 한다.

이벤트 핸들러를 등록하는 방법은 앞에서도 이미 예제를 만들어 보았는데 간단하게 요약해 보자. 다음 형식으로 클릭 이벤트를 처리할 핸들러 함수를 지정한다. 핸들러 지정시 반드시 onClick으로 캐멀 케이스로 이름을 작성하고 함수 호출문이 아닌 함수를 전달한다.

onClick={핸들러 함수}

이벤트는 다음에 더 자세히 알아 보기로 하고 여기서는 상태를 기억하는 방법에 대해 연구해 보자. 다음 예제는 버튼을 하나 배치하고 클릭할 때마다 정수값을 1씩 증가시키는 카운터이다. 컴포넌트 이름은 Counter로 붙였다.

예제 : counter

function Counter() {

console.log("Counter 호출")

let count = 10

function decrease() {

count--;

console.log("count = " + count)

}

function increase() {

count++;

console.log("count = " + count)

}

return (

<h2>{count}</h2>

</>

)

}

function App() {

return (

</>

);

}

카운트값을 저장할 변수를 count로 선언하고 10으로 초기화했다. 실행중에 변경될 값이므로 상수(const)는 안되고 변수(let)여야 한다. <h2> 엘리먼트안에 이 값을 출력하고 두 버튼의 ㅡnClick 이벤트에 increase, decrease 핸들러를 지정했다.

두 함수에서는 count 변수를 ++, --연산자로 1씩 증감한다. 이 함수가 언제 호출되는지 확인하기 위해 로그를 찍고 Counter 컴포넌트 호출시에도 로그를 찍는다. 버튼을 누르면 변수값이 바뀔 것이다. 과연 그런지 콘솔창을 열어 놓고 버튼을 눌러 보자.

웹 페이지에 카운트의 초기값인 10이 표시되고 아래쪽에 버튼도 잘 배치되어 있다. 실행 직후에 Counter 컴포넌트가 호출되는데 이 동작은 랜더링을 할 때 딱 한번만 일어난다. count가 지역 변수임에도 핸들러에서 값을 유지하는 이유는 클로저로 지역 변수의 생명을 연장하기 때문이다. 버튼을 누르면 count 변수가 증감하는 것을 로그로 확인할 수 있다.

그러나 화면의 카운트는 바뀌지 않는다. 이렇게 되는 이유는 count 변수의 변화가 페이지를 다시 그려야 하는 변화인지 알수 없기 때문이다. increase 함수는 1증가하고 로그만 찍을 뿐 화면을 다시 랜더링하지는 않는다. 그러니 내부적으로 변수만 증가할 뿐 화면에는 변화가 없다. 정 하려면 카운트가 바뀔 때 DOM을 직접 조작하는 코드를 작성해야 한다.

function Counter() {

console.log("Counter 호출")

let count = 10

function decrease() {

count--;

document.getElementById("cnt").innerText = count

console.log("count = " + count)

}

function increase() {

count++;

document.getElementById("cnt").innerText = count

console.log("count = " + count)

}

return (

<h2 id="cnt">{count}</h2>

</>

)

}

function App() {

return (

</>

)

}

카운터를 출력하는 h2 엘리먼트를 참조하기 위해 cnt id를 부여했다. count 변수를 증감할 때 cnt 노드를 찾아 innerText 속성에 현재값을 대입한다. 버튼을 누를 때마다 내부 변수는 물론이고 화면의 카운트도 갱신된다.

과거에는 실제 이런 식으로 웹 페이지를 제어했으며 지금도 간단한 작업은 이 방법을 쓴다. 그러나 보다시피 똑같은 처리를 두 군데서 하고 있어 반복이 심하고 일일이 수작업으로 바꾸는 식이라 코드양도 많다. 게다가 DOM을 직접 조작하기 때문에 속도도 느리고 화면을 계속 그리면 출력 품질도 나빠진다. 더 좋은 방법이 필요하다.

useState

사용자가 컴포넌트를 조작하면 내부 정보에 변화가 발생한다. 이처럼 컴포넌트의 모양과 동작에 영향을 미치는 내부 정보를 상태(State)라고 한다. 상태는 값을 영구히 저장하며 값이 바뀌는 즉시 랜더링을 다시 하여 화면에 반영한다.

카운터 예제에서는 현재 카운트값인 count가 상태이다. 사용자의 조작에 반응하여 값이 바뀌며 화면에도 즉시 반영해야 한다. 앞 예제는 count를 단순 변수로 선언했기 때문에 값이 바뀌어도 화면에 나타나지 않았다. 다음 예제는 count를 상태로 정의한다.

예제 : counterState

import {useState} from 'react';

function Counter() {

const [count, setCount] = useState(10);

function decrease() {

setCount(count - 1)

}

function increase() {

setCount(count + 1)

}

return (

<h2>{count}</h2>

</>

)

}

function App() {

return (

</>

)

}

상태 정의를 위해 useState훅을 사용하며 이를 위해 import {useState} from 'react'; 선언을 했다. 이 선언없이 React.useState라고 적어도 되지만 매번 그러기는 귀찮으므로 임포트를 하고 쓰는 것이 편리하다. 이후의 예제는 useState를 임포트한 것으로 가정한다.

변수 선언문이 useState로 바뀌었고 증감 함수는 setCount 함수로 카운트를 조작한다. 로그는 호출 시점을 이미 파악했으므로 제외했다. 상태로 정의했으므로 DOM을 직접 조작하지 않아도 버튼을 누를 때 카운트가 잘 증감한다. 상태값이 잘 유지되고 바뀔 때마다 랜더링도 즉시 수행한다.

상태를 정의할 때는 useState 함수를 사용하며 인수로 초기값을 전달한다. 리액트는 초기값의 타입에 맞는 내부 변수와 변수를 변경하는 함수를 생성하고 이 둘을 배열로 묶어 리턴한다. 리턴한 변수와 함수를 배열로 분해하여 대입받는다. 리액트 초보자에게 생소하고 어려운 문장이어서 잘 분석해 보고 완전히 이해해야 한다.

어떤 상태든 초기값은 있어야 하므로 인수로 그 값을 지정하는데 위 예제는 정수 10을 전달했다. useState는 정수형 상태 변수를 생성하고 10으로 초기화한다. 그리고 그 변수의 값을 변경하는 함수도 같이 만든다. 한번에 두 개의 값을 리턴할 수 없으므로 변수와 함수를 배열로 묶어 리턴하며 컴포넌트는 이 둘을 각각의 변수로 대입받는다.

[count, setCount] = useState(10)를 완전히 말로 풀어 보면 이렇다. 정수형 상태가 필요한데 초기값을 10으로 해 줘. 그 값을 저장할 변수의 이름은 count로 하고 상태를 변경하는 함수는 setCount로 해 줘. 이렇게 된다. 이후 코드에서는 {count} 표현식으로 카운트 상태를 출력하고 setCount 함수로 count 상태를 바꾼다.

이 코드에서 초기값 10은 임의적이며 0이나 100 등 원하는대로 지정할 수 있다. 또 변수의 이름이나 함수의 이름도 useState가 결정하는 게 아니고 대입받을 때 사용자가 지정하는 것이다. 상태 A에 대해 변수는 a로, 변경 함수는 setA로 이름을 짓는 것이 관례라 count, setCount로 무난하게 이름을 붙였지만 아무 이름이나 붙여도 상관없다.

const [개수, 바꿔] = useState(88);

function decrease() {

바꿔(개수 - 1)

}

....

useState는 리액트의 함수라 이 철자대로 적어야 하고 상태 변수와 변경 함수는 사용자가 이름을 붙이는 것이다. 두 개의 값을 배열로 받아 분해 대입하니 어려워 보일 뿐 변수 선언문과 대입문일 뿐이다. 사용자 명칭임을 확인하기 위해 한글로 이름을 붙여 봤는데 관행대로 이름을 짓는 것이 바람직하다.

상태 변수의 타입은 초기값의 타입을 따른다. count는 초기값을 10으로 지정했으니 숫자형임을 알 수 있다. 타입을 명확히 지정하려면 함수 이름 뒤에 <number> 제네릭을 붙여 숫자 타입임을 명시한다.

const [count, setCount] = useState<number>(10);

타입을 밝혀 두면 잘못된 타입의 값을 대입할 때 경고를 보여 주며 빌드 단계에서는 에러로 처리하여 실수를 방지한다. 또, 숫자형인지 이미 알고 있으므로 인텔리센스도 더 지능적으로 동작해 타입에 딱 맞는 메서드만 보여준다.

개발 모드에서는 경고만 발생할 뿐 실행은 된다. 빌드 모드에서는 잠재적인 사고를 방지해 주는 분명한 이점이 있어 타입을 가급적 밝히기를 권장한다. 특히 복잡한 객체 타입은 멤버의 타입까지 점검할 수 있어 큰 도움이 된다. 그러나 숫자나 문자열 정도의 단순 타입은 초기값으로부터 타입 유추가 가능해 굳이 이럴 필요까지는 없다. 또 학습중에는 번거롭고 가독성이 떨어져 이 책은 타입을 생략한다.

다음은 증감 함수를 분석해 보자. 두 함수는 증감 버튼의 onClick 이벤트에 연결되어 있으며 버튼을 누를 때마다 상태값을 1씩 증감시키는 동작을 처리한다. 읽기 쉽게 평이한 함수로 정의했는데 화살표 함수로 쓰면 한줄로 간단히 줄일 수 있다.

const decrease = () => setCount(count - 1)

const increase = () => setCount(count + 1)

한줄로 압축했을 뿐 함수의 동작은 같다. onClick에 함수를 지정해야 하니 함수에 대한 이름은 붙였다. 이벤트 핸들러는 다른 곳에서 호출할 일이 없으므로 아예 onClick 지정문안에 화살표 함수로 바로 써 버려도 된다.

<button onClick={() => setCount(count - 1)}>감소</button> 

<button onClick={() => setCount(count + 1)}>증가</button>

동작은 완벽하게 똑같고 성능상의 차이도 없다. 이렇게 되면 이름을 줄 필요도 없다. 화살표 함수 대신 함수 리터럴로 작성해도 익명함수라는 점은 같다.

실무에서는 간략한 표기법이 짧고 손가락도 덜 피곤해 이런 코드를 즐겨 쓴다. 그러나 초보자가 보기에 눈에 쏙 들어오는 코드는 아니며 헷갈린다. 예제는 학습용이므로 이런 과도한 압축은 자재하고 가급적 읽기 쉽게 작성한다. 실무에서 이런 압축된 코드를 보면 원래 코드가 뭐였는지 풀어서 생각해 보자.

다음은 함수 안의 코드를 보자. increase는 setCount(count + 1)로 count의 원래값에 1을 더한 값을 count에 대입하여 1 증가시킨다. 이건 결국 count++과 같은 셈이다. 과연 그런지 두 함수의 본체를 바꿔 변수값을 증감시켜 보자. count를 직접 바꾸므로 대입받을 때도 const가 아닌 let으로 받아야 하며 호출을 확인하기 위해 로그도 찍어 보았다.

function Counter() {

let [count, setCount] = useState(10);

function decrease() {

count--

console.log("count = " + count)

}

function increase() {

count++

console.log("count = " + count)

}

실행해서 로그를 살펴 보면 count값이 정상적으로 잘 증감한다. 그러나 페이지가 갱신되지 않는다. count는 단순한 변수일 뿐이고 이 값이 바뀌었다고 해서 랜더링을 다시 하지는 않는다. 스크립트에 변수는 수십, 수백개가 있을 수 있는데 어떤 변수가 화면에 영향을 미치는지 리액트가 정확히 판단할 수 없다.

리액트에게 이 변화가 화면에 반영되어야 함을 명확히 알려 주어야 꼭 필요할 때만 화면을 잽싸게 갱신할 수 있다. 그 역할을 하는 함수가 바로 setCount이다. useState가 이 함수를 생성할 때부터 상태 변경시 랜더링을 다시 하는 코드를 이미 작성해 놓았다.

그래서 상태 변수를 직접 바꾸어서는 안되며 항상 변경 함수를 통해야 한다. count를 변경할 때는 반드시 setCount 함수를 호출해야 하며 count는 사용자 코드에서 현재 상태값을 읽기만 하는 읽기 전용이다. 그래서 애초에 변수와 함수를 대입받을 때 const로 받는 것이다. 다음 상태가 바뀔 때까지 count는 상수이다.

상태를 만들고 사용하는게 간단하지는 않지만 정형화되어 있다. 이 규칙을 잘 지키고 잘 따라해야 한다. 라이브러리는 약속을 지킬 때 제대로 서비스해 준다.

비동기 상태 갱신

값을 계산할 때 한번에 하는게 간단하지만 흐름상 여러번 나누어 해야할 때가 있다. 예를 들어 월급을 계산할 때는 기본급 뿐만 아니라 잔업 시간에 따른 초과수당을 계산해야 하고 근무 일수에 따라 유휴 수당을 지급하는 등 여러 요인이 있다. 이럴 때는 조건에 따라 각각 처리하는게 간편하다.

월급 = 기본급

if (잔업 했으면) 월급 += 초과근무수당

if (근무 일수 채웠으면) 월급 += 유휴 수당

....

컴포넌트의 상태도 같은 함수 내에서 일단 바꿨다가 조건 점검 후 다시 바꾸는 경우가 종종 있다. 그러나 상태는 단순 변수가 아니어서 여러 번 조작하면 부작용이 있다. 예를 들어 카운트를 증가시킨 후 일정 조건이 되면 하나 더 증가시킨다고 해 보자.

function increase() {

setCount(count + 1)

if (true) {

setCount(count + 1)

}

테스트 코드는 조건이 항상 true이므로 카운트가 2 증가해야 한다. 과연 이 코드가 잘 동작하는지 테스트해 보면 원하는대로 동작하지 않고 항상 1씩만 증가한다. if 조건문이 없어도, setCount만 여러번 반복해도 마찬가지이다.

function increase() {

setCount(count + 1)

}

이렇게 되는 이유는 리액트가 상태를 비동기적으로 갱신하기 때문이다. 변경 함수를 호출할 때마다 값을 즉시 갱신하고 랜더링하면 가상 DOM을 쓰는 이점이 없으므로 갱신하겠다는 사실만 기록해 두었다가 리턴하기 전에 한꺼번에 갱신하는게 유리하다.

setCount(count + 1)은 랜더링을 유발할 뿐 count를 즉시 변경하는 것은 아니다. count가 10인 상태에서 첫 setCount 호출시 현재 count 값에 1 더한 값, 즉 11로 갱신해야 함을 기록한다. 준비만 할 뿐 실제 count가 증가한 것은 아니다. count는 let이 아닌 const로 선언한 상수여서 바뀔 수도 없다. 두번째 setCount를 호출할 때도 마찬가지이다.

setCount(count + 1) -> 현재값 10에 1을 더한다.

if (true) {

setCount(count + 1) -> 현재값 10에 1을 더한다.

}

이때도 count는 아직 이전 값인 10이므로 여전히 11로 갱신해야 함을 기록한다. count에 11을 두 번 대입해 봐야 여전히 11이므로 1만 증가하는 것이다. 정 2번 증가시키려면 값을 갱신하는 업데이트 함수를 전달한다. 보통 a => a연산식 형태의 화살표 함수로 짧게 쓴다. 다음 코드는 카운트가 2씩 증감한다.

function Counter() {

const [count, setCount] = useState(10);

function decrease() {

setCount(c => c - 1)

if (true) {

setCount(c => c - 1)

}

function increase() {

setCount(c => c + 1)

if (true) {

setCount(c => c + 1)

}

return (

<h2>{count}</h2>

</>

)

}

function App() {

return (

</>

)

}

함수도 즉시 실행되지 않는 점은 같으며 대기열에 차곡차곡 쌓아만 둔다. 그러나 대기열에서 꺼내 하나씩 실행할 때는 항상 인수로 받은 현재값을 기준으로 동작하므로 대입문과는 달리 비동기적으로 여러번 실행하더라도 각각의 효과를 낸다.

setCount가 호출하는 익명 함수의 인수 c에 대입되는 count는 함수 호출 시점의 값이다. 첫 호출에서 10에 1을 더한 11이 되었다가 다음 호출에서 11에 1을 더한 12가 된다. 하나의 상태를 여러번 바꿀 때 뿐만 아니라 여러 상태를 한꺼번에 바꿀 때, 특히 상태값끼리 서로 참조할 때도 이런 특성을 주의해야 한다.

컴포넌트별 상태

Counter는 현재 카운트를 상태로 유지하며 사용자의 클릭에 반응하지만 속성을 전달받지 않아 언제나 같은 모양이다. 항상 10부터 시작하고 증감폭도 1로 고정되어 있다. 컴포넌트마다 이 값을 다르게 설정하려면 속성을 받아 코드에 적용해야 한다. 시작값은 init 속성으로 받고 증감값은 step 속성으로 받아 보자.

그리고 여러 개의 컴포넌트를 나열만 하면 잘 구분되지 않으므로 배경색을 bgcolor 속성으로 받고 컴포넌트간을 띄우기 위해 바깥 여백인 margin을 10 정도 띄운다. 이 정도 변화를 주려면 어디를 어떻게 수정해야 하는지 직접 실습해 보자.

function Counter(props) {

const [count, setCount] = useState(props.init);

function decrease() {

setCount(count - props.step)

}

function increase() {

setCount(count + props.step)

}

return (

<h2>{count}</h2>

</div>

)

}

function App() {

return (

</>

);

}

Counter 함수의 인수로 props를 받는다. count 상태의 초기값을 상수 10 대신 props.init로 지정하면 호출측이 전달한 값부터 세기 시작한다. 증감값인 props.step은 increase, decrease 함수에 적용하여 이만큼씩 증감한다.

배경색인 bgcolor는 루트 엘리먼트인 div에 style 속성으로 지정하되 background 멤버에 적용한다. <> </> 빈 엘리먼트는 속성을 지정할 수 없으므로 div로 바꿨다. 호출측에서는 2개의 Counter 컴포넌트를 배치하되 각각 다른 속성을 주었다.

초록색 카운터는 100부터 시작해서 2씩 증감하고 노란색 카운터는 25부터 시작해서 5씩 증감한다. 같은 컴포넌트지만 호출측이 전달한 속성에 따라 동작과 모양이 달라진다. 또 각 컴포넌트는 자신의 상태를 스스로 유지한다. 현재 카운트를 count 상태에 저장하며 상태가 바뀌면 즉시 랜더링하여 최신값을 잘 보여 준다.

컴포넌트끼리는 서로 독립적이다. 초록색의 카운트를 어떻게 바꾸더라도 노란색 카운트는 영향을 받지 않는다. 속성과 상태는 컴포넌트별로 독점적인 메모리 영역에 저장되어 고유하며 서로 방해하지 않는다.

5-2.컴포넌트 실습

Fruit

컴포넌트가 가질 수 있는 상태의 개수에는 제약이 없다. 또 상태의 타입에 대한 제약도 없다. 배열이든 객체든 아무리 복잡한 것도 상태로 저장할 수 있다. 상태를 정의하는 여러 가지 실습을 해 보자.

실행중에 바뀔 수 있고 컴포넌트가 스스로 기억해야 할 값을 상태로 정의한다. <h2> 태그에 과일 이름을 출력하되 아래쪽에 두 개의 버튼을 배치하고 각 버튼을 누를 때 과일 이름을 Apple, Orange로 바꿔 보자.

과일 이름을 표시하는 컴포넌트이므로 Fruit로 이름을 붙인다. 어떤 과일 이름을 선택했는지 기억하는 것이 바로 상태이다. 상태의 이름을 fruit로 지정하고 초기값은 어떤 것도 선택하지 않았다는 의미의 "Choice"로 지정한다.

function Fruit() {

const [fruit, setFruit] = useState("Choice")

function appliClick() {

setFruit("Apple")

}

function orangeClick() {

setFruit("Orange")

}

return (

<h2>{fruit}</h2>

<button onClick={appliClick}>Apple</button> 

<button onClick={orangeClick}>Orange</button>

</>

)

}

function App() {

return (

</>

);

}

<h2>에 현재 과일 상태값인 {fruit}를 표시한다. 두 버튼은 클릭할 때 바꿀 과일을 캡션으로 표시하고 이벤트 핸들러에서 setFruit 메서드를 호출하여 과일 이름을 바꾼다. 클릭하는 즉시 랜더링이 발생하여 <h2>의 과일 이름이 바뀐다.

사용자의 동작에 따라 상태를 바꾸고 보여 주는 간단한 예제이다. 핸들러를 화살표 함수로 작성하면 더 짧게 만들 수 있다.

function Fruit() {

const [fruit, setFruit] = useState("Choice")

return (

<h2>{fruit}</h2>

<button onClick={() => setFruit("Apple")}>Apple</button> 

<button onClick={() => setFruit("Orange")}>Orange</button>

</>

)

}

간단한 핸들러는 컴포넌트안에 작성하는 것이 간편하다. 지금까지는 이벤트 핸들러가 함수임을 분명히 보이기 위해 분리된 함수로 작성했는데 앞으로는 가급적 인라인으로 짧게 작성하기로 한다.

AdBox

속성과 상태는 리액트 컴포넌트의 기본이다. 이 둘만 잘 알아도 웬만한 컴포넌트는 제작할 수 있다. AdBox는 거의 모든 사이트에 존재하는 광고상자이다.

광고는 제품 정보와 가격을 표시한다. 그리고 자랑거리를 늘어 놓아 사용자를 유혹하여 장바구니에 담도록 꼬드겨야 한다. 이 컴포넌트에 필요한 정보를 나열해 보자. 별점이나 배송비 같은 건 빼고 딱 세 가지 기본 정보만 표시한다. 각 정보의 특성을 잘 살펴 보고 어떻게 구현할지 연구해 보자.

▶제품명, 가격 : 상품마다 다르되 실행중에 바뀌지는 않는다. 이런 정보는 컴포넌트를 생성할 때 부모가 전달하는 속성으로 받는다.

▶장바구니에 담기 : 사용자가 클릭해서 장바구니에 담거나 빼며 실행중에 바뀔 수 있다. 이런 정보는 상태로 구현한다.

두 개의 속성과 한 개의 상태이면 충분하다. 컴포넌트 표면에는 제품과 가격을 표시하되 이미지가 실감나지만 실습이 번거로우니 문자열로 표시한다. 또 장바구니에 넣고 빼기 위한 버튼이 필요하다.

function AdBox(props) {

const [cart, setCart] = React.useState(false)

return (

<h3>{props.product} : {props.price}원</h3>

<button onClick={() => setCart(!cart)}>장바구니 {cart ?"빼기":"담기"}</button>

</div>

)

}

function App() {

return (

</>

);

}

컴포넌트 이름은 AdBox로 지었다. 부모는 속성으로 제품명인 product와 가격인 price를 전달하며 AdBox는 두 정보를 조립하여 <h3> 태그에 표시한다. 그리고 그 아래에 장바구에 담는 버튼을 배치하고 클릭시 cart의 상태를 변경한다.

장바구니에 담았는지 아닌지는 실행중에 바뀔 수 있어 cart 상태로 정의했으며 기본값은 false로 지정하여 구입전이다. 버튼 클릭시 setCart(!cart) 메서드로 cart 상태를 반대로 뒤집는다. 장바구니에 넣은 상품과 그렇지 않은 상품은 cart 상태에 따라 다음 두 가지를 결정한다.

▶ div 태그의 클래스명을 incart, outcart로 토글한다.

▶ 버튼을 캡션을 빼기 또는 담기로 토글한다.

간단한 선택이므로 삼항 조건 연산자를 사용했다. 클래스명이 바뀌므로 각 클래스에 대한 스타일을 다르게 정의한다. 스타일은 자바스크립트보다는 CSS 파일에 작성하는 것이 좋다. App.css에 두 개의 스타일을 추가한다.

.App {

text-align: center;

}

....

.incart {

width:300px;

padding:10px;

margin:5px;

border:1px solid red;

background:greenyellow;

}

.outcart {

width:300px;

padding:10px;

margin:5px;

border:1px solid black;

background:lightgray;

}

폭 300에 안쪽 여백 10, 바깥 여백 5를 주어 사각형으로 감싼 것은 같다. 장바구니에 담긴 상품은 빨간색 테두리에 초록색 배경이고 아직 담지 않은 상품은 검정색 테두리에 회색 배경이다. cart 상태가 바뀌면 div의 클래스명이 바뀌면서 적용할 스타일도 달라진다. 실행해 보자.

부모가 전달한 제품명과 가격을 잘 표시하며 속성에 따라 광고의 내용이 달라진다. 버튼을 클릭하면 장바구니에 담기며 버튼의 캡션과 배경색이 바뀐다. 자신의 속성을 잘 표현하고 사용자의 클릭에 대해 스스로 동작하고 모양을 바꾸기도 한다.

두 개의 컴포넌트가 서로 간섭없이 독립적으로 잘 동작하는 부품의 역할을 충실히 수행하고 있다. 함축적인 코드를 사용하기 때문에 기능에 비해 소스 코드가 굉장히 짧다. 이런 컴포넌트를 조합해서 웹 페이지를 만드는 것이다.

Label

레이블은 화면에 문자열 메시지를 보여주는 간단한 컴포넌트이다. 메시지 내용은 부모가 전달해 주는대로 표시하되 클릭시 활성/비활성 상태를 스스로 토글한다. 어떤게 속성이고 어떤게 상태인지 어렵지 않게 결정할 수 있다.

function Label(props) {

const [isActive, setIsActive] = useState(props.isActive)

return (

<h3

style = {{color : isActive ? 'black':'gray'}}

onClick={() => { setIsActive(!isActive); }}

{props.message}

</h3>

)

}

function App() {

return (

</>

);

}

message는 부모가 전달해 주고 바뀌지 않으니 속성이고 isActive는 부모로부터 초기값을 받지만 실행중에 바뀔 수 있으니 상태이다. 부모는 자동 로그인 상태를 표시하기 위해 레이블을 배치하고 레이블은 스스로 토글 가능하다.

활성 여부는 검정색과 회색으로 구분한다. 레이블은 옵션값을 보여주고 토글하는 기능을 제공하는 컨트롤이다. 어떤게 상태인지, 어떤게 속성인지 잘 구분해야 한다.

이번에는 이 레이블을 두 개 배치하여 서로 반대되는 옵션 중 하나를 배타적으로 선택한다고 해 보자. 두 컴포넌트를 묶어 하나의 그룹처럼 사용하는 예이다.

function Label(props) {

const [isActive, setIsActive] = useState(props.isActive)

return (

<h3

style = {{color : isActive ? 'black':'gray'}}

onClick={() => { setIsActive(!isActive); }}

{props.message}

</h3>

)

}

function App() {

return (

<Label message="오른쪽 ->" isActive={false}/>

</div>

);

}

두 컴포넌트를 나란히 배치하기 위해 div의 display 스타일을 flex로 지정하고 약간 간격을 띄웠다. 레이블로 왼쪽 또는 오른쪽 중 하나를 선택하여 현재 방향을 표시한다. 부모는 왼쪽은 활성화, 오른쪽은 비활성화 상태로 초기값을 지정한다.

초기 모습은 잘 동작하는 거 같지만 두 레이블이 독립적으로 토글 가능하니 둘 다 활성화되거나 둘 다 비활성화될 수도 있다. 한쪽을 바꾼다고 해서 반대쪽이 영향을 받지 않는다.

두 컴포넌트가 배타적 옵션을 지정하는 그룹이 되려면 둘 중 하나만 활성화되어야 한다. 이런 동작을 구현하려면 자신이 활성화될 때 반대쪽 레이블은 비활성화시켜야 한다. 그러나 컴포넌트끼리는 서로 독립적이어서 이건 불가능하다. 형제끼리 강제로 상태를 바꿀 방법이 없고 심지어 서로의 존재조차도 모른다.

상태 끌어 올리기

결국 하나만 활성화하려면 그 상태는 컴포넌트가 아닌 부모가 관리해야 한다. 개별적인 활성/비활성이 아닌 누가 활성화되어 있는지 부모가 알아야 한다. 활성 상태를 공통 부모에게로 옮기는데 이를 상태 끌어 올리기(State lifting)라고 한다.

function Label(props) {

const [isActive, setIsActive] = useState(props.isActive)

return (

<h3

style = {{color : isActive ? 'black':'gray'}}

onClick={() => { }}

{props.message}

</h3>

)

}

function App() {

const [activeLabel, setActiveLabel] = useState(1)

return (

<Label message="오른쪽 ->" isActive={activeLabel === 2}/>

</div>

);

}

누가 활성화되어 있는지는 이제 부모의 상태이며 activeLabel 상태를 추가했다. 이 값이 1이면 왼쪽, 2면 오른쪽이되 초기값은 왼쪽인 1이다. 부모는 activeLabel에 따라 두 레이블의 활성 여부를 속성으로 전달한다.

초기화는 잘되지만 아직 상태를 바꾸는 방법은 없다. 차일드를 클릭했을 때의 이벤트 처리가 비어 있는데 여기에 뭘 넣어야 할까? 의사코드로 적어 보면 필요한 동작은 명확하다.

그러나 내 상태는 바꿀 수 있지만 형제의 상태를 바꿀 수는 없다. 이 처리는 부모가 해 줘야 하는데 부모는 자식이 클릭되었다는 이벤트를 받지 않는다. 리액트의 데이터는 항상 부모에게서 자식쪽으로만 이동하며 반대로는 이동하지 않는다. 자식이 클릭 사실을 부모에게 알릴 방법이 없다.

이 문제를 해결하려면 부모가 상태를 바꾸는 방법을 자식에게 가르쳐 줘야 한다. 속성으로 전달할 수 있는 타입에는 제약이 없어 함수도 전달할 수 있다. 부모가 아예 이 동작을 함수로 만들어 속성으로 전달하고 자식은 클릭에 대해 이 함수를 호출하면 된다.

function Label(props) {

return (

<h3

style = {{color : props.isActive ? 'black':'gray'}}

onClick={props.onToggle}

{props.message}

</h3>

)

}

function App() {

const [activeLabel, setActiveLabel] = useState(1)

return (

<Label message="<- 왼쪽" isActive={activeLabel === 1} onToggle = {() => {setActiveLabel(1)}} />

<Label message="오른쪽 ->" isActive={activeLabel === 2} onToggle = {() => {setActiveLabel(2)}} />

</div>

);

}

활성 레이블을 1번으로 바꾸는 함수를 왼쪽 레이블의 onToggle 속성으로 전달한다. 마찬가지로 2번을 활성화하는 함수를 오른쪽 레이블에게 전달한다. 레이블은 클릭 이벤트에 부모가 전달한 함수를 지정한다. 호출하는게 아니라 지정만 해 두면 클릭 이벤트 발생시 이 함수가 호출된다.

레이블은 isActive 상태를 더 이상 가질 필요 없다. 부모가 전달해준 속성에 따라 출력하면 되고 클릭에 대해 부모가 준 함수만 호출하면 된다. 부모는 자신이 관리하는 activeLabel 상태에 따라 자식에게 현재 활성화 여부와 클릭시의 동작까지 속성으로 전달하여 '내가 시키는대로만 해'라고 해 두면 된다.

컴포넌트끼리 부모, 자식 관계를 이룰 때 랜더트리를 구성한다. 항상 부모를 먼저 그리고 자식을 그리도록 되어 있어 부모의 상태가 바뀌면 자식들은 모두 다시 랜더링된다. 이 과정에서 자식은 부모로부터 전달받은 활성 상태를 그린다. 동작조차 속성으로 전달할 수 있음은 리액트를 이해하는데 핵심적인 내용이니 잘 익혀 두자. 다음 사항도 알아 두자.

▶ 진짜 이벤트는 DOM 요소에만 걸 수 있으며 리액트 컴포넌트는 이벤트를 직접 받을 수 없다. onClick, onMousedown 등은 <p>, <div>, <h3> 같은 HTML 태그에서만 받는다. 왜냐하면 사용자의 동작을 받아 이벤트를 발생시키는 것은 결국 브라우저이고 브라우저는 리액트 컴포넌트 따위는 모르기 때문이다.

▶ 리액트 컴포넌트에도 이벤트 비슷한 것을 만들 수 있지만 이것은 그냥 함수일 뿐 엄밀하게는 이벤트가 아니다. 위 예제의 onToggle은 활성 차일드를 바꾸는 동작을 함수로 정의한 것이며 함수이므로 이름은 마음대로 붙일 수 있다. 이 함수를 속성으로 전달하면 DOM 요소가 필요할 때 호출한다. 위 예제의 경우 사용자가 <h3>를 클릭할 때 호출하여 활성 차일드를 토글한다.

상태 끌어 올리기의 개념이 어렵지는 않지만 왜 필요한지, 올리지 않았을 때 어떤 문제가 있는지를 이해하는 과정이 지루하다. 일련의 실습을 통해 속성과 상태의 역할, 부모에서 자식으로의 단방향 전달, 함수도 속성으로 전달할 수 있다는 사실을 잘 알아 두자.

5-3.리듀서

useReducer

useState는 딱 하나의 상태를 관리하고 필요할 때 상태 변경 함수를 호출하는 식이라 단순하고 쓰기 쉽다. 상태당 하나씩 useState를 선언하되 상태가 정 많으면 객체로 묶으면 되니 개수는 별 문제가 되지 않는다. 그러나 상태를 변경하는 함수를 여기 저기서 호출하면 어디서 문제가 생겼는지 파악하기 어렵다.

useReducer는 useState의 확장판이다. 상태만 관리하는게 아니라 상태를 조작하는 방법까지도 관리 대상이다. 상태를 바꾸는 절차는 대체로 비슷한데 바꿀 때마다 유사한 코드를 반복하면 낭비가 심해진다. 상태 변경 처리를 한곳에 모아 두면 관리하기 쉽다.

리듀스(Reduce)는 줄인다, 모은다는 뜻인데 여러 곳에 흩어져 있는 상태 변경 코드를 이 함수 안에 모아 두면 관리하기 쉽다. 리듀서는 직접 호출하지 않고 액션 객체를 생성하여 디스패치로 전달하는 간접적인 방법을 사용한다. 디스패치는 어떤 상태를 어떻게 바꾸라는 지시 사항을 액션에 담아 리듀스로 전달한다.

설명만 들어서는 왜 이런 구조를 사용하는지 직관적으로 이해되지 않으므로 요약적인 예제를 만들어 보자. useReducer는 리듀서 함수를 인수로 받고 디스패치를 리턴한다. 호출 형식은 다음과 같다.

[state, dispatch] = useReducer(reducer, init)

첫번째 인수인 reducer가 상태 변경 함수이며 이름은 보통 reducer라고 붙인다. 상태의 그룹별로 여러 개의 리듀서를 쓸 때를 대비하여 그룹명을 접두로 붙이기도 한다. 하는 일이 정해져 있어 구조는 항상 같다. 인수로 현재 상태값과 이 상태값을 어떻게 바꾸라는 지시사항인 action을 받고 변경한 값을 리턴한다.

function reducer(상태, 액션) {

액션에 따른 상태 변경

}

상태를 조작하는 방법이 다양하고 각 방법별로 인수가 있는 경우도 있어 호출하기 전에 상세한 지시사항을 action 객체로 생성한다. 그리고 dispatch를 통해 action을 리듀서로 보낸다. 카운터 예제를 useReducer 훅으로 새로 만들어 보자. 액션이 다양할 수 있다는 것을 보이기 위해 증가, 감소 뿐만 아니라 리셋 기능을 추가한다.

function Counter() {

const [count, countDispatch] = useReducer(countReducer, 10)

function countReducer(count, action) {

console.log("현재 카운트 : " + count);

switch (action.type) {

case "inc":

return count + 1

case "dec":

return count - 1

case "reset":

return 10

default:

return count

}

return (

<h2>{count}</h2>

<button onClick={() => countDispatch({type:"dec"})}>감소</button> 

<button onClick={() => countDispatch({type:"inc"})}>증가</button> 

<button onClick={() => countDispatch({type:"reset"})}>리셋</button>

</>

)

}

function App() {

return (

</>

);

}

countReducer 함수가 리듀서이며 숫자를 세는 상태 변경을 담당한다는 의미로 접두를 붙였다. count의 현재값과 이 상태를 어떻게 바꾸라는 지시사항인 action 객체를 인수로 받고 action의 type값에 따라 count를 증감하거나 리셋한 후 변경된 상태값을 리턴한다.

리듀서를 준비한 후 useReducer 훅으로 상태를 정의한다. 인수로 리듀서와 초기값 10을 주면 상태 변수와 countDispatch를 리턴한다. 여기까지 준비해 두면 필요할 때 디스패치를 통해 상태를 마음대로 변경할 수 있다. 디스패치로 리듀서를 호출할 때 action의 type에 어떤 동작을 할지 지정한다. 세 버튼에 대해 type이 각각 다른 액션 객체를 전달했다.

버튼을 누르면 inc, dec, reset 액션이 리듀서로 전달되며 리듀서는 액션의 type에 따라 상태를 적절히 변경한다. 리듀서를 직접 호출하지 않고 디스패치를 통해 간접적으로 호출해야 상태 변경과 랜더링까지 묶음으로 처리할 수 있다. useState에서 count에 값을 직접 대입하지 않고 setCount를 통하는 것과 같은 이유이다.

상태값을 바꾸기 전에 count의 현재값을 로그로 출력하는 코드가 있는데 이는 모든 상태 변경에 대한 공통작업에 해당한다. 값의 유효성을 점검하거나 변경 이력을 관리하거나 연관 상태와 동기화하는 등 상태 변경과 관련된 모든 작업을 여기서 수행할 수 있다. 상태를 어떻게 바꾸든 공통 작업을 switch문 이전에 딱 한번만 하면 되니 코드의 중복이 제거된다.

switch문의 이전 상태를 그대로 리턴하는 default 처리는 꼭 필요하며 생략해서는 안된다. 혹시라도 정의하지 않은 액션을 잘못 전달하더라도 최소한 이전 상태는 유지해야 한다. 이 처리가 없으면 undefined를 리턴하여 골치 아픈 버그가 발생할 수 있다.

액션 객체

여기까지만 보면 useState와 형식만 다를 뿐 별반 차이가 없어 보이지만 상태 변경 방식인 type의 종류를 늘리는 식으로 두배나 절반으로 바꾸는 동작을 추가하기 쉽다. 또 action 객체에 얼마든지 많은 정보를 포함할 수 있어 각 동작의 추가 인수를 상세히 포함시키는게 가능하다. 예를 들어 증가, 감소도 꼭 1씩만 하는게 아니라 호출측이 증감량을 지정할 수 있고 리셋도 별도의 초기값을 줄 수 있다.

function Counter() {

const [count, countDispatch] = useReducer(countReducer, 10)

function countReducer(count, action) {

console.log("현재 카운트 : " + count);

switch (action.type) {

case "inc":

return count + action.delta

case "dec":

return count - action.delta

case "twice":

return count * 2

case "half":

return count / 2

case "reset":

return 10

default:

return count

}

return (

<h2>{count}</h2>

<button onClick={() => countDispatch({type:"dec", delta:3})}>감소</button> 

<button onClick={() => countDispatch({type:"inc", delta:2})}>증가</button> 

<button onClick={() => countDispatch({type:"twice"})}>두배</button> 

<button onClick={() => countDispatch({type:"half"})}>절반</button> 

<button onClick={() => countDispatch({type:"reset"})}>리셋</button>

</>

)

}

function App() {

return (

</>

);

}

동작 하나당 switch문의 case만 늘리면 된다. 또 action에 delta 멤버를 추가하여 증감의 정도를 지정했는데 더할 때는 2만큼, 뺄 때는 3만큼이다. 버튼 개수를 늘리고 보낼 액션만 의미에 맞게 다시 만들면 된다. 원한다면 5증가, 4감소 등의 더 상세한 증감 동작도 얼마든지 만들 수 있다.

useState는 setCount로 값을 바로 지정할 수만 있지만 useReducer는 action과 dispatch를 경유해야 하는 번거로움이 있지만 중간에 한단계가 더 들어가면 상태를 한 곳에서 다양한 방법으로 관리할 수 있다. 그래도 차이를 잘 모르겠다면 위 예제와 똑같은 예제를 setState로 만들어 보면 바로 느낄 수 있다.

function Counter() {

const [count, setCount] = useState(10)

function inc(delta) {

console.log("현재 카운트 : " + count);

setCount(count + delta)

}

function dec(delta) {

console.log("현재 카운트 : " + count);

setCount(count - delta)

}

function twice() {

console.log("현재 카운트 : " + count);

setCount(count * 2)

}

function half() {

console.log("현재 카운트 : " + count);

setCount(count / 2)

}

function reset() {

console.log("현재 카운트 : " + count);

setCount(10)

}

return (

<h2>{count}</h2>

</>

)

}

function App() {

return (

</>

);

}

똑같이 동작하지만 setCount 호출이 여기 저기 흩어져 있고 반복된다. 이 정도 규모에서는 한눈에 보이겠지만 코드가 긴 상태에서 count 로직에 뭔가 문제가 발생했을 때 setCount를 일일이 찾아 점검하는게 쉬운 일이 아니다. 또 상태를 변경할 때마다 setCount 호출 전에 로그를 출력하는 코드가 반복된다.

이에 비해 useReducer는 상태를 변경하는 모든 코드가 리듀서 안에 모여 있으니 이상이 발생해도 점검하기 쉽고 변경 방법을 추가하거나 수정하기도 쉽다. 모든 액션을 한 함수에서 처리하므로 switch문 앞에 로그를 한번만 출력하면 된다. inc, dec는 인수를 줘야 하고 twice, half는 핸들러만 지정하여 형식이 다른데 디스패치는 액션이 달라질 뿐 후출 구문은 항상 같다.

웹 앱에서 상태는 굉장히 중요하고 정밀하게 잘 다루어야 한다. 두 개의 상태 관리 훅보다 더 발전된 상태 관리 라이브러리가 많다. 아직은 배울 단계가 아니므로 좀 더 알아본 후 더 고급 상태 관리에 대해 연구해 보자.