🚩 로컬에 리액트 설치하는 방법

yarn으로 설치 권장!

-> npm보다 용량이 훨씬 적음

https://yarnpkg.com/
$ npm install -g yarn
-> 예전 버전으로 설치됨 (1.22.19)

$ corepack prepare yarn@stable --activate
-> 최신버전으로 업데이트 하는 법

yarn start한 후 js 파일 수정 시 오류 발생

Failed to load config "react-app" to extend from.

-> 학원분이 알려주신 해결방법

• 의존성 주입 : $ yarn add eslint-config-react-app --dev
• eslint 버전 업데이트 : $ eslint-config-react-app@latest --dev

react에서 sass/scss 사용할 때 설치방법

$ yarn add sass

npm으로 react 설치 방법

React app
https://create-react-app.dev/
$ npm create react-app 폴더명
$ npm start

---

🚩 todoList

리액트로 아주 간단하게 투두리스트 만들기

📝 설명

• 다른 기능 제외하고 추가 기능만 구현

✒️ 사용법

입력

App.js

import React, { useState } from "react";
import "./App.css";
import TodoBoard from "./components/TodoBoard";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todoList, setTodoList] = useState([]); // 입력한 아이템을 모아줄 배열

  const addItem = () => {
    console.log("inputValue는? : ", inputValue);
    setTodoList([...todoList, inputValue]); // 기존 array에 입력된 inputValue를 추가. spread 이용하여 전체를 가져옴.
    console.log("todoList는? : ", todoList);

    setInputValue(""); // input 초기화
  };

  return (
    <div className="App">
      <input
        className="input-style"
        type="text"
        placeholder="할 일을 입력하세요"
        onChange={(event) => setInputValue(event.target.value)}
        value={inputValue} // input 초기화
      />
      <button className="btn-style" onClick={addItem}>추가</button>

      {/* todoList를(array를) props로 TodoBoard에 전달. 대부분 props이름과("=" 앞부분) 전달할 변수/함수명의 이름을 같게 함 */}
      <TodoBoard todoList={todoList} />
    </div>
  );
}

export default App;

TodoBoard.jsx

import React from "react";
import TodoItem from "./TodoItem";

// props로 몇 개를 받아올지 모르기 때문에 map 사용
export default function TodoBoard(props) {
  return (
    <div>
      <h1>Todo List</h1>
      {props.todoList.map((item) => (
        // 받아온 item을 각각의 TodoItem에 전달
        <TodoItem item={item} />
      ))}
    </div>
  );
}

TodoItem.jsx

import React from "react";

const TodoItem = (props) => {
  console.log("props는? : ", props);
  return (
    <div className="item">{props.item}</div> // 받아온 이름이 item
  );
};

export default TodoItem;

출력

• 이미지로 대체
  
  

🔗 참고 링크 & 도움이 되는 링크

• yarn
• sass

---