Video 이제 채팅으로 비디오를 받을 수 있다고 해봅니다. 이를 위해 Video 컴포넌트를 만들고(loop 어트리뷰트는 비디오가 끝나면 다시 자동으로 시작하도록 하는 것입니다)import "./Video.scss";export default function Video({ src, type }: { src: string; type: string }) { return ( );} Box에 추가했습니다....import Video from "./Video";export default function Box({ name, onClickList }: { name: string; on..

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로 작성해하고, 숫자가 ..