[TIL] 2025-06-17 | 3차 프로젝트 | 리액트

[s0ooo0k]

TIL - 2025-06-17

💡 새롭게 배운 것

• 리액트 App.js > index.js > index.html

• return 태그 안에선 하나의
  안에서 구성해야 함
• jsx 문법 3가지
  • class 는 className으로 작성
  • 변수 넣을 땐 {중괄호} : 데이터 바인딩 하고자 하는 모든 곳에서 사용 가능
  • style 넣을 땐 style={{스타일명: '값'}}
    ex) 폰트 사이즈, 컬러 지정

<h4 style={ {color:'red', fontSize: '16px'}}

• state : 자료를 저장(변수 느낌)
  • a : state에 보관한 자료 (js의 구조분해할당)
  • b : state의 변경을 도와주는 함수

import {useState} from 'react';
let [a, b] = useState('알리오올리오');
let [logo, setLogo] = useState(['a', 'b', 'c']);

• /* eslint-disable */ : warning 메세지 disable

• onClick과 state를 같이 사용하기

<span onClick={() => {b(a+1)}} > happy </span>

• 컴포넌트 만들기
  1. function 만들기
  2. return() 안에 html 담기
  3. <함수명></함수명> 쓰기

❗ 오늘의 문제 상황 & 🚀 시도 및 해결 과정

** Q. state는 언제 사용할까? **
➡️state는 값이 변경되면 자동으로 재렌더링됨. 따라서 변경 시에 html에 자동으로 반영됨

⭐ 느낀 점

✒️ 데일리 회고

• 새로 배우는 건 어렵지만 언제나 재밌다~