7장부터는 파일 구조가 변경되었습니다.모든 예제 소스는 github repository 에서 확인할 수 있습니다. Friends UI에서 컴포넌트를 없앴다가 다시 나타나게 하는 상황을 상상해보았을 때,해당 컴포넌트가 state를 쓰고 있었다면, 해당 state는 보존될까요? 아니면 다시 새롭게 생성될까요? 질문에 답하기 위해 기존 UI에 컴포넌트 몇 개를 더 만들어보죠. 위처럼 친구 목록을 만들어봅니다.이름들은 상위 컴포넌트에서 받도록 props로 만들었습니다.import "./Header.scss";export default function Header() { return ( Chat Friends );}import Header from "./..

Objective 5. State로 리렌더링하기 글에서 배운 것을 활용해서 이번에는 메시지를 작성해서 보내도록 해보겠습니다. 사용자 예상 시나리오는 다음과 같이 만들었습니다.빈 입력창과 누를 수 없는 보내기 버튼이 있다.입력창에 1개라도 글자가 있으면 보내기 버튼을 누를 수 있다. 보내기 버튼을 누르면 3초 동안입력창과 보내기 버튼이 비활성화된다.보내기 버튼에 스피너가 등장한다.3초 이후입력창과 버튼이 최초 모습으로 바뀐다.입력된 글자로 메시지가 오른쪽에 새롭게 등장한다.      Step 1빈 입력창과 누를 수 없는 보내기 버튼이 있다.  간단하게 만들어봅시다.import "./Input.scss";export default function Input() { return ( ..

5장부터는 UI가 개선되었습니다.모든 예제 소스는 github repository 에서 확인할 수 있습니다. State 사용자 입력을 받거나, 이미지를 교체하는 등 어떤 상태를 저장하고 이를 통해 표현할 일이 생깁니다.이때 state를 사용하면 됩니다. 예를 들어 아래처럼 메시지를 누르면 숨길 수 있고, 아니면 원상 복귀되도록 만든다고 하면다음과 같이 useState를 통해 state 변수를 만들어서 조건부 렌더링을 만들면 됩니다.import { useState } from "react";import "./Message.scss";export default function Message(...) { const [hidden, setHidden] = useState(false); return (..