Theme 7. State 보존하기 글에서 만들었던 친구 목록에 테마를 추가해봅니다.  이는 오른쪽 상단의 테마 버튼을 눌러서 전환할 수 있도록 합니다. 먼저 List에 theme state를 추가하고 div의 className에 적용합니다.export default function List(...) { const [theme, setTheme] = useState("light"); return ( // theme에 따라 className이 변경 {names.map((name) => ( onClickListItem(name)}> ..

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 (..

CSS CSS는 Cascading Style Sheets의 약자로,웹페이지를 구성하고 있는 요소들에 대한 스타일을 적용하는 언어입니다.쉽게 말해 웹페이지를 색깔이나 여백 등을 지정해서 예쁘게 만드는 것이죠. 리액트에서 CSS를 작성해서 적용하는 방법 3가지를 소개하려고 합니다.      style Attribute 태그의 style 어트리뷰트를 통해 마크업에서 직접 스타일을 만들 수 있습니다.export default function ChatHeader({ name = "Cherry" }: { name?: string }) { return ( Chat with {name} );}     다만 필드명은 lowCamelCase로 작성해하고, 숫자가 ..

Conditional Rendering 조건부 렌더링이란 쉽게 말해 조건에 따라 UI에 표현하는 것입니다.조건문을 만들 때는 아래 3가지 연산자가 주로 쓰입니다.&&? :if if는 너무 쉬우니 생략하고, 두 연산자에 대해 자세히 알아보겠습니다.     && 논리적 AND 연산자인 &&는 앞의 조건식이 true일 때만 표현합니다. 메시지를 확인했으면 체크 표시를 하고, 읽지 않았다면 아무 표시도 하지 않아봅니다.export default function ChatMessage({ message, checked = false,}: { message: string; checked?: boolean;}) { return ( {checked && } ..