🌱 → 🌳

useState vs useRef vs Variable useState 의 state 그리고 useRef 의 ref 와 리액트 내부의 변수가 렌더링에 따라 어떤 식으로 변화할까 세 가지 버튼으로 각각 state/ ref / var 값을 올리는 컴포넌트를 구성 값의 변화 없이 컴포넌트 리렌더링을 위해서 하나의 버튼을 더 만듦 → 각 버튼을 클릭하면서 해당 값의 변화 관찰 import { useRef, useState } from "react"; const Comparing = () => { const [countState, setState] = useState(0); const [render, setRender] = useState(0); const countRef = useRef(0); let count..

React.Fragment 실제 리액트에서 컴포넌트를 조합할 때, 최상위에 div를 사용하지 않고 반환해야하는 경우가 생김 css가 깨진다거나, 테이블 요소 사이에 div요소가 들어가면 error가 발생하는 경우 React.Fragment로 return 값에서 최상위 tag 역할을 하는 div 없애기 import React from "react"; export default function ReactFragment() { return ( 안녕하세요! 반갑습니다! ); } (react 라이브러리의 기능이므로 react 라이브러리 추가 필요) React.Fragment는 로 대체 가능 ! import React from "react"; export default function ReactFragment() ..

📌 JSX(Javascript XML) : Javascript에 XML을 추가한 문법 개발자들이 과거 DOM 방식으로 html을 그리다보니 바로 납득이 안갔음 -> 그래서 만든 문법 보통 리액트에서만 사용 html 문서 구조를 JS에서도 사용이 가능함 -> 따라서 JS 내부에서도 html을 짜듯 코드 구성이 가능해짐 📍 기본 DOM 방식으로 html 그린 코드 function HelloWorldButton() { const [isClick, setClickState] = React.useState(false); const text = isClick ? "It's clicked" : "Hello, React world"; return React.createElement( "button", { onClick..