하루 하나씩 작성하는 TIL #23
1. JSX 문법이란 무엇일까요?
JSX (JavaScript XML) 문법은 React에서 사용하는 문법 확장입니다.
JSX는 JavaScript 코드 안에 XML이나 HTML과 유사한 구문을 작성할 수 있게 해줍니다. 이 문법은 UI 컴포넌트를 정의할 때 사용되며, 코드가 더 읽기 쉽고 구조적으로 이해하기 쉬워집니다.
JSX는 브라우저에서 직접 실행되지 않으므로, React는 Babel과 같은 트랜스파일러를 사용하여 JSX를 JavaScript로 변환합니다.
ex)
const element = <h1>Hello, world!</h1>;
const element = React.createElement('h1', null, 'Hello, world!');2.사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이틀과 같은 애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요?
useState 훅을 사용했습니다.
useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook입니다.
상태 값과 상태를 업데이트하는 함수를 반환합니다.
3.애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?
모든 상태와 상태를 업데이트하는 로직은 App 컴포넌트 내에 존재합니다.
React에서 상태를 공유할 때는 일반적으로 상위 컴포넌트에서 상태를 관리하고, 이를 props를 통해 하위 컴포넌트에 전달하는 방식을 사용합니다.
4.기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.
불변성을 유지해야 하는 부분 중 하나는 투두 항목의 상태를 업데이트할 때입니다.
예를 들어, 특정 투두 항목을 완료 상태로 변경하거나 삭제할 때, 불변성을 유지하여 상태를 업데이트하는 것이 중요합니다. 이를 통해 React가 상태 변경을 정확히 감지하고, 컴포넌트를 효율적으로 렌더링할 수 있습니다.
const onToggleHandler = (id) => {
setTodos(todos.map((todo) =>
todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
));
};위 코드에서 setTodos(todos.map(...))는 기존의 todos 배열을 복사하고, 특정 항목의 isDone 상태를 변경하여 새로운 배열을 생성합니다. 이렇게 불변성을 유지하면 React가 상태 변경을 감지하고 컴포넌트를 재렌더링합니다.
5. 반복되는 컴포넌트를 파악하고 재사용할 수 있는 컴포넌트로 분리해 보셨나요? 그렇다면 어떠한 이점이 있었나요?
반복되는 투두 항목을 TodoItem이라는 컴포넌트로 분리해보았습니다.
코드 재사용성 증가, 유지 보수성 향상, 가독성 개선 등의 장점이 있습니다.
