221125_TIL

오늘 공부한 내용

• 항해 99 3주차   

• React S.A과제 제출 및 기본개념 학습

자바스크립트에서 사용했던 문법들이 리액트에서 바뀌었던 부분

<button style="background-color:grey;" onclick="alert('버튼!')">버튼</button> // 자바스크립트

<button style={{backgroudnColor,'grey'}} onClick={alert('버튼!')}>버튼</button> // 리액트

리액트는 자바스크립트 기반으로 만들어진 '라이브러리'이다 보니 문법은 비슷하나 바뀐 부분이 존재.

"" 대신 브레이스({})를 사용한다. 

onclick도 카멜케이스를 사용하여 onClick와 같은 형식으로 사용한다.

inline-style 또한 -를 제외시키고 카멜케이스를 사용하며 css요소들은 JSON형식으로 넣어주어야 한다.

 

현재 페이지 안에 내용을 부분을 컴포넌트화 시켜서 과제 제출을 위한 틀은 완성 해놓은 상태.

 

import logo from "./logo.svg";
import "./App.css";

import SearchForm from "./component/SearchForm";
import Header from "./component/Header";
import TodolistForm from "./component/TodolistForm";

function App() {
  return (
    <div>
      <Header />
      <SearchForm />
      <TodolistForm />
    </div>
  );
}

export default App;

import React from "react";
import Card from "./Card";
import { useState } from "react";

export default function TodolistForm(props) {
  const [todo, setTodo] = useState([
    { id: 1, title: "오늘의 할일", content: "일찍 일어나기!" },
    { id: 2, title: "과제", content: "과제는 다하셨나요?" },
  ]);
  const [done, setDone] = useState(true);
  return (
    <div className="todolist_form">
      <div className="todolist_form_inner">
        <div className="list_container">
          <span className="todolist_title">꼭 열심히 해보아요!🔥</span>
          <div className="card_container">
            {todo.map((todo) => {
              return <Card key={todo.id} {...todo} todo={setTodo} />;
            })}
          </div>
        </div>
        <div className="list_container">
          <span className="todolist_title">오늘도 열심히 잘 했어요 💭</span>
          <div id="done" className="card_container"></div>
        </div>
      </div>
    </div>
  );
}

 

어려웠던 내용

• 리액트 개념에 대해서는 급한 부분은 없으니 확실하게 개념을 다지고 넘어가기 위해서 항해99 리액트 인강을 다 듣고 다른 강의를 들어야지 생각했다. 하지만 항해에서 제공해준 인강이 친절하지 않다고 생각이 들고 오히려 더 어렵게만 느껴졌다.

느낀점

항해99에서 제공해준 리액트 인강은 참고용으로 잘 들었다. 어떤 강의를 다시 찾아서 들어야할지 생각도 해보고 계획도 미리해보게 된 하루였다. 다들 주특기 언어가 시작되는 하루라 바쁘셨겠지만 언젠가는 다들 보람찬 하루를 보내시지 않을까?

요즘들어 늦게 자는 만큼 체력관리나 멘탈관리에 대한 부분에 조금 더 신경써야겠다는 생각이 자주 드는 건 왜일까

내일 할 일

• 1주차 과제를 마무리하고 제출해보자.
• 기술매니저님께 추천받은 노마드코더님의 강의 한번 뿌셔보자!
• 시간 날 때 타입스크립트 기본개념 공부를 마저 했으면 좋겠다.