useEffect는 컴포넌트가 **렌더링된 이후 특정 작업(사이드 이펙트)**을 수행하게 해주는 React Hook입니다. 📌 “사이드 이펙트”란? 이런 작업들은 컴포넌트가 그려진 후 실행돼야 하므로 useEffect에서 처리합니다. 기본 문법 요소 설명 첫 번째 인자 함수. 이 안에 실행할 코드 작성 두 번째 인자 의존성 배열. 어떤 값이 바뀔 때 실행할지 결정 1. 컴포넌트 처음 렌더링될 때 1번 실행 2…. read more »
조건에 따라 다른 컴포넌트를 보여주거나 숨기는 방법입니다. 말 그대로 어떤 조건이 참일 때만 JSX 요소를 보여주는 것입니다. JavaScript의 if, 삼항 연산자, && 연산자 등을 이용해 JSX 내부에서 조건을 제어할 수 있습니다. 1. if 문 (렌더링 전에 분기 처리) 2. 삼항 연산자 (? 🙂 – JSX 안에서 사용 가능 3. AND 연산자 (&&) – 조건이 참일… read more »
React의 이벤트 처리(Event Handling)에 대해 알아보겠습니다.React에서는 DOM 이벤트를 JavaScript 함수(핸들러)와 연결해서 버튼 클릭, 입력 변화, 마우스 이동 같은 사용자 동작에 반응할 수 있습니다. 기본 구조 HTML에서는 React에서는 onclick=”…” onClick={…} 문자열로 함수 이름 전달 직접 함수 객체 전달 주요 이벤트 종류 이벤트 종류 React 속성 설명 클릭 onClick 버튼, 이미지 등 클릭할 때 입력 변화 onChange… read more »
useState는 React에서 함수형 컴포넌트 안에서 상태(데이터)를 관리할 수 있도록 해주는 React Hook입니다. 이전에는 클래스 컴포넌트에서만 state를 사용할 수 있었지만, useState 덕분에 함수형에서도 사용 가능해졌어요! 기본 문법 예제: 숫자 카운터 다양한 타입의 상태 다루기 문자열 상태 불리언 (true/false) 배열 상태 객체 상태 주의: 상태 변경은 set함수로만 버튼 클릭 시 상태 변경 상태가 변경되면 어떻게 되나요? 정리… read more »
Props는 **”properties”**의 줄임말로,부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 읽기 전용 데이터입니다. 비유하자면 Props는 택배 상자입니다. 부모가 만든 상자를 자식에게 전달하고, 자식은 그 안의 내용을 사용만 합니다. 기본 사용법 Step 1. 자식 컴포넌트에서 props를 받아 사용 Step 2. 부모 컴포넌트에서 값을 전달 결과: 비구조화 할당으로 더 깔끔하게 자주 쓰는 방식이며 props.name보다 코드가 간결합니다. 여러… read more »
컴포넌트(Component)는 React에서 UI를 구성하는 독립적이고 재사용 가능한 블록입니다. 한 문장으로 정의하면:“컴포넌트는 하나의 함수이며, JSX를 반환합니다.“ 컴포넌트의 두 가지 방식 함수형 컴포넌트 (권장 ✅) 또는 ES6 화살표 함수: 클래스형 컴포넌트 (구버전 ❌) 최근 React는 함수형 컴포넌트 + 훅(Hooks)을 중심으로 사용됩니다. 클래스 컴포넌트는 레거시로 간주됨. 컴포넌트 사용 방법 JSX에서는 <Greeting />처럼 컴포넌트를 태그 형태로 사용합니다. Props로 값… read more »
JSX는 JavaScript 안에서 HTML을 작성할 수 있게 해주는 문법 확장입니다.JSX는 브라우저에서 바로 실행되지 않으며, Babel이라는 트랜스파일러가 이를 React.createElement() 형태의 JavaScript로 변환해줍니다. 예시: 위 코드는 실제로는 아래와 같이 해석됩니다: JSX의 주요 특징 및 문법 규칙 1. 반드시 하나의 부모 요소로 감싸야 함 또는 <></>와 같은 Fragment를 사용할 수도 있습니다. 2. HTML 속성 대신 camelCase 사용 JSX에서는… read more »