1️⃣ React는 화면을 빠르게 바꾸는 JS 라이브러리bash복사편집npm create vite@latest → Vite로 설치하면 빠르고 가벼운 개발 환경이 만들어져요.2️⃣ JSX는 JS 안에서 HTML처럼 코드를 짜는 문법jsx복사편집const element = h1>Helloh1>; → HTML처럼 생겼지만, class → className 등 문법 차이 주의!3️⃣ 컴포넌트는 화면의 부품 단위jsx복사편집function Hello() { return p>안녕하세요p>; } → 함수처럼 만들고 처럼 태그로 사용할 수 있어요.4️⃣ Props는 컴포넌트에 값을 전달하는 방법jsx복사편집function Hello(props) { return p>{props.name}님 반가워요!p>; } Hello..

React로 화면을 만들다 보면,“버튼 클릭했을 때 숫자 올리기”“입력창에 글자를 쓰면 화면에 반영하기”이런 걸 하고 싶을 때가 많죠!👉 그럴 때 사용하는 게 바로 이벤트 처리예요!이번 글에서는✅ 이벤트란 뭔지✅ 어떻게 처리하는지✅ 클릭과 입력 예제쉽고 간단하게 설명드릴게요.1️⃣ 이벤트란 뭘까요?이벤트(Event) = 사용자의 행동예를 들어:버튼 클릭키보드 입력마우스 움직임스크롤이런 걸 전부 “이벤트”라고 부릅니다!React에서는**“이벤트가 일어났을 때 실행할 코드”**를 미리 정해두는 걸👉 **이벤트 처리(Event Handling)**라고 해요.2️⃣ 클릭 이벤트 처리 (onClick)버튼을 눌렀을 때 어떤 일이 일어나게 하고 싶다면?jsx복사편집function App() { const han..

지난 시간엔 컴포넌트에 값을 전달하는 Props에 대해 배웠어요.근데 이런 상황, 꼭 있죠?"버튼을 클릭했을 때 숫자가 올라가야 해요!""입력창에 글자를 쓰면 화면에도 바로 보여야 해요!"이렇게 값이 바뀌는 상황에서 필요한 개념이 바로 State입니다!오늘은✅ State가 뭐고✅ 왜 필요한지✅ 어떻게 쓰는지정말 쉽게 설명해드릴게요 😊1️⃣ State는 ‘변하는 값’을 저장하는 공간이에요React는 원래 한 번 화면이 그려지면, 값이 바뀌어도 화면은 그대로예요.근데 화면도 같이 바뀌게 하려면?👉 State에 값을 저장해야 해요.State는 컴포넌트 안에서 관리되는**“변하는 데이터”**입니다.2️⃣ 예제 – 버튼 누르면 숫자가 올라가요우선 아래 예제부터 볼게요:jsx복사편집import { useStat..

React에서 컴포넌트를 막 만들기 시작하면,이런 생각이 들 수 있어요."같은 버튼인데 글씨만 다르게 하고 싶은데?""컴포넌트 안에 정보를 어떻게 넣지?"그럴 때 등장하는 게 바로 Props입니다!오늘은✅ Props가 뭔지✅ 왜 필요한지✅ 어떻게 쓰는지진짜 쉽게 정리해드릴게요.1️⃣ Props란 뭘까?**Props = properties(속성)**의 줄임말이에요.쉽게 말하면,👉 컴포넌트에 값을 전달할 때 사용하는 방법이에요!예를 들어 볼게요jsx복사편집function Welcome() { return h1>안녕하세요!h1>; } 이 Welcome 컴포넌트를 여러 번 쓰고 싶은데,각각 이름만 다르게 하고 싶어요.이렇게 바꾸면?jsx복사편집function Welcome(props) { return h1>안..

React를 시작하면 꼭 듣게 되는 말!“React는 컴포넌트 기반이야.”“컴포넌트를 잘게 나눠서 써야 돼.”🤔 근데... 컴포넌트가 도대체 뭐길래 자꾸 나오는 걸까요?이번 글에서는✅ 컴포넌트가 뭐고✅ 왜 중요한지✅ 직접 예시까지진짜 쉽게 설명드릴게요!1️⃣ 컴포넌트란 쉽게 말하면 '부품'이에요React에서 컴포넌트는👉 웹 화면을 작은 조각으로 나눠서 만드는 방법이에요.예를 들어, 쇼핑몰 웹사이트가 있다고 해볼게요:상단 메뉴상품 카드장바구니 버튼하단 푸터이 각각을 하나의 컴포넌트로 만들어서 재사용하는 거예요!📌 컴포넌트는 '화면의 재사용 가능한 조각'이라고 생각하면 돼요.2️⃣ 왜 굳이 컴포넌트로 나눠야 할까?컴포넌트로 쪼개면 뭐가 좋은지 궁금하죠?✅ 장점 1. 재사용 가능같은 디자인, 같은 기능을..

React로 코딩을 막 시작하면,HTML처럼 생긴 코드인데 자꾸 오류가 나고…class를 썼더니 빨간 줄 뜨고…for도 못 쓰고…"이게 대체 뭐야… 나 분명 HTML 썼는데 왜 안 되는 거야??"이렇게 혼란스러웠던 적 있으시죠?그 이유는 바로👉 우리가 쓰는 건 HTML이 아니라 JSX이기 때문이에요!오늘은 JSX가 뭔지, 그리고 HTML과 뭐가 어떻게 다른지진짜 쉽게 알려드릴게요.1️⃣ JSX는 뭐예요?JSX는 한마디로 JavaScript 안에서 HTML처럼 생긴 문법을 쓸 수 있게 해주는 문법이에요.jsx복사편집const element = h1>Hello, React!h1>; 이 코드 보시면,JavaScript 변수 안에 같은 태그가 들어가 있죠?원래 JS에서는 태그를 이렇게 직접 쓰는 게 불가능했..