리액트 베이직반 수업 1일차

나는 아직 코딩의 '코'자도 잘모르는 햇병아리이기 때문에, 베이직 / 스탠다드 / 챌린지 반 중 베이직반을 선택하였다!

 

 

 

 

시멘틱 html

 

내가 그린 그림...

 

• 접근성 향상: 의미론적 태그는 시각 장애인을 위한 스크린 리더와 같은 보조 기술에 의미 있는 정보를 제공한다.
• 검색 엔진 최적화(SEO): 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있도록 돕는 의미론적 태그를 사용하여 페이지를 더 효과적으로 인덱싱하여 검색 엔진 결과 순위를 높인다.
• 유지보수 용이성: 의미론적 태그는 코드의 가독성을 높여, 개발자들이 웹사이트를 더 쉽게 이해하고 유지보수할 수 있게 한다.

 

 

 

 

 

<개인 과제>

 

목표: 샘플 todos를 읽어와 화면에 뿌려주기!

const todos = [
  { id: 1, text: "Buy milk" },
  { id: 2, text: "Clean the house" },
  { id: 3, text: "Go for a run" },
  { id: 4, text: "Finish homework" },
  { id: 5, text: "Call mom" },
  { id: 6, text: "Buy groceries" },
  { id: 7, text: "Walk the dog" },
  { id: 8, text: "Read a book" },
  { id: 9, text: "Do laundry" },
  { id: 10, text: "Write code" },
];

 

 

 

먼저 프로젝트를 초기화 시켜줘야 한다.

1. src 폴더에 있는 index.css와 App.css의 내부를 전부 삭제해준다.(삭제 안하면 다른 css가 적용될 수 있음)

2. 이후 App.jsx 내부도 초기화 시킨다. rafce 단축키를 쓰면 기본 세팅을 할 수 있다!

 

// src/App.jsx
const App = () => {
  return <div>App</div>;
};

export default App;

 

 

 

컴포넌트 만들기

1. src 폴더 내부에 component 폴더를 만든다.

2. 해당 폴더 안에 TodoList.jsx 파일을 만든다. (컴포넌트 이름은 보통 PascalCase로 만든다!)

// src/components/TodoList.jsx 예시
import React from "react";

const TodoList = () => {
  return <div>TodoList</div>;
};

export default TodoList;

 

 

 

컴포넌트 연결하기

1. 내가 만든 TodoList.jsx는 혼자선 아무것도 못한다.

2. 화면을 보여주는 App.jsx에 가서 TodoList.jsx 컴포넌트를 연결해줘야 한다.

import TodoList from "./TodoList";

const App = () => {
  return (
    <main>
      <TodoList />
    </main>
  );
};

export default App;

 

 

 

map() 메서드 사용하기

1. map 메서드는 배열 메서드이다. 따라서 배열을 가져와 변경해주거나 순회해줄 때 사용한다.

2. 이제부터 우리는 해당 todos 배열을 가져와서 map 메서드를 사용하여 순회하며, 각 객체를 jsx코드로 변경해줄 것이다.

// src/components/TodoList.jsx
const TodoList = () => {
  return (
	  // 시맨틱 html 태그인 ul(unordered list), li(list item)를 사용하여 리스트를 만듭니다.
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

 

여기서 왜 <li key={todo.id}>{todo.text}</li> 키값을 써줘야 하는지 의문이 생겼다. 그래서 검색해보았다. 

 

 

React에서 Key 속성을 사용하는 이유는 다음과 같다.

 

1. 고유 식별: 각 리스트 아이템에 고유한 식별자를 제공한다.

2. 성능 최적화: React가 리스트 변경 사항을 효율적으로 파악하고 업데이트를 할 수 있게 한다.

3. 상태 유지: 리스트 아이템의 순서가 변경되거나 아이템이 추가/제거될 때 각 아이템의 상태를 올바르게 유지한다.

4. 리렌더링 최소화: 필요한 요소만 리렌더링하여 성능을 향상시킨다.

5. 경고 방지: React의 "key prop" 관련 경고를 방지한다.

 

 

 

그럼, React에서 key를 사용해야하는 주요 상황은 다음과 같다.

 

1. 동적 리스트를 렌더링할 때: 배열의 요소를 map() 함수로 순회하며 컴포넌트나 요소를 생성할 때 key를 사용해야 한다.

{items.map(item => <li key={item.id}>{item.name}</li>)}

 

 

2. 반복적인 컴포넌트를 렌더링할 대: 같은 컴포넌트를 여러번 사용하는 경우에도 각 인스턴스에 고유한 key을 부여해야 한다.

{[1, 2, 3].map(num => <MyComponent key={num} />)}

 

 

3. 조건부 렌더링에서 여러 요소를 사용할 때: 조건에 따라 여러 요소를 렌더링하는 경우, 각 요소에 key를 부여해야 한다.

{isLoggedIn ? (
  <LogoutButton key="logout" />
) : (
  <LoginButton key="login" />
)}

 

 

4. 리스트 항목의 순서가 변경될 수 있을 때: 드래그 앤 드롭 기능이 있는 리스트처럼 항목의 순서가 동적으로 변경될 수 있는 경우에 특히 중요하다.

 

 

요약하면, 동적으로 생성되는 여러 요소나 컴포넌트를 다룰 때 key를 사용해야 한다. 이는 React가 변경사항을 효율적으로 추적하고 관리하는데 도움은 준다.

 

 

 

 

CSS 작성하기

/* index.css */
.main-center { // .으로 시작하는 건 클래스라는 의미의 선택자
  display: flex; // flex 선언
  flex-direction: column; // 세로로 정렬
  justify-content: center; // 세로 가운데 정렬
  align-items: center; // 가로 가운데 정렬
  height: 100vh; // 100vh는 화면 전체 높이의 100%를 의미
}

 

 

CSS 연결하기

import TodoList from "./components/TodoList";

const App = () => {
  return (
	  // 여기에 main-center 클래스를 추가하세요.
    <main className="main-center">
      <TodoList />
    </main>
  );
};

export default App;

 

 

간단하게 CSS 연결 완료! 이로써 과제를 완성하였다!