01. 왜 자스로 스타일 적용이 안되져

강의 중 DOM요소에 접근하여 스타일을 줘보기로 하였다!

🔽자신만만한 나의 코드

const todoTitle = document.getElementsByClassName('todo_title')

console.log(todoTitle);
todoTitle.style.backgroundColor = 'red'

딸!깍🖱🖲

바보! HTMLCollection은 유사배열이라고^^
유사배열은 Array의 내장함수를 쓸 수 없답니다잉!

그래서 어캐 해결할건디!

Array.from으로 배열처럼 해주고 forEach 써서 하나씩 바꿔주세여

const todoTitle = Array.from(document.getElementsByClassName('todo_title'))

console.log(todoTitle); // 👉 [h3.todo_title, h3.todo_title, h3.todo_title]

todoTitle.forEach(todoTitle => {
  todoTitle.style.color = "red"
})

02. Component가 뭐여?

리액트 엘리먼트를 컴포넌트로 만들어서 활용

// index.js

import ReactDOM from 'react-dom'

function Hello() {
  return <h1>리액트야 살려조</h1>;
}

const element = {
  <>
    <Hello /> // 👉 Hello함수가 리턴하는 리액트 엘리먼트
    <Hello />
    <Hello />
  </>
 );

ReactDom.render(element, document.geElementById('root'));

element 변수에서 JSX코드를 작성할때 함수이름(Hello)을 가진 태그를 사용할 수 있다...이게 바로 리액트 컴포넌트(React Component)

⚛️ 리액트 컴포넌트 만드는 규칙!

1. 함수이름을 첫 글자를 반드시 대문자
2. JSX문법으로 만든 리액트 엘리먼트 리턴..

03. 리액트 파일들!

index.js | App.js | index.html

*index.js🔽* (src폴더에 있음)

메인 프로그램! 여기서 HTML템플릿 & 자바스크립트 컴포넌트를 조합해서 렌더링하고 뷰에 보여줌 [ HTML Template + Component =(rendering)=>> View ]

App.js (src폴더에 있음)

컴포넌트 정의하는 프로그램!!! 실제로 화면에 표시되는 내용들은 여기서 만들어진당!

index.html (public폴더에 있음)

index.js에 대응 된다. HTML템플릿 파일임!!
<직접표시되는건 아니고 index.js에 의해 일어난 렌더링 결과가 표시되어요!>
⚠️ 이름 바꾸지마시오!

App.js

🔽 react에서 제공하는 컴포넌트 클래스를 상속받아서 구현하기 위해서 {Component}를 임포트!!!!

import React, {Component} from 'react';

🔽 함수형 컴포넌트

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

🔽 렌더링...

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);