[React] useState로 수정 모드 구현하기 - 조건부 렌더링

React에서는 State를 이용해 화면의 상태를 변경할 수 있다.

이번에는 링크 목록의 각 항목에 수정 모드를 추가하면서 useState와 조건부 렌더링을 활용하는 방법을 정리했다.

1. 수정 모드 State 만들기

먼저 LinkItem 컴포넌트에서 수정 모드인지 확인하기 위한 State를 만들었다.

const [isModifyingMode, setIsModifyingMode] = useState(false);

isModifyingMode는 현재 수정 모드인지 나타내는 State이다.

처음에는 수정 모드가 아니므로 false로 설정했다.

값	의미
false	일반 모드
true	수정 모드

2. 버튼을 클릭해 State 변경하기

수정 버튼을 클릭하면 isModifyingMode의 값을 반대로 변경하도록 했다.

setIsModifyingMode(!isModifyingMode);

현재 값이 false라면 true로 변경되고, true라면 false로 변경된다.

따라서 버튼을 클릭할 때마다 일반 모드와 수정 모드가 서로 전환된다.

3. State에 따라 화면 변경하기

State의 값에 따라 화면에 표시되는 내용도 다르게 만들 수 있다.

예를 들어 수정 모드가 아닐 때는 수정을 표시하고, 수정 모드일 때는 저장을 표시하도록 했다.

{isModifyingMode ? "저장" : "수정"}

삼항 연산자를 사용하면 다음과 같은 의미이다.

isModifyingMode가 true
→ "저장" 표시

isModifyingMode가 false
→ "수정" 표시

입력창도 수정 모드일 때만 표시할 수 있다.

{isModifyingMode
    ? <input type="text" />
    : <></>
}

즉, isModifyingMode의 값에 따라 <input>이 나타나거나 사라진다.

4. State와 화면의 관계

React에서는 State가 변경되면 해당 State를 사용하는 UI도 다시 렌더링된다.

이번 예제의 흐름은 다음과 같다.

수정 버튼 클릭
↓
setIsModifyingMode()
↓
State 변경
↓
React가 화면 재렌더링
↓
수정 ↔ 저장 버튼 변경
입력창 표시 ↔ 숨김

따라서 개발자가 직접 DOM을 찾아서 버튼이나 입력창을 변경할 필요가 없다.

State를 변경하면 React가 변경된 State를 기준으로 화면을 갱신한다.