Language/React (22) 썸네일형 리스트형 📘React 재생주기함수란? ✅ 생명주기 함수 란?컴포넌트가 생성되고 업데이트되고 사라지는 과정에서 특정 시점에서 자동으로 호출되는 함수들 이다.이 함수들은 주로 클래스형 컴포넌트에서 사용되지만, 함수형 컴포넌트에서는 useEffect 훅 으로 대체된다.🍼 더 쉬운 설명컴포넌트가 태어나고 , 변화하고, 죽는 과정을 말한다.마치 사람처럼 컴포넌트도 등장-> 변화 -> 사라짐이 과정을 거친다. ✅ Class형 컴포넌트 componentDidMount() { console.log("처음 나타났어요!");}이건 컴포넌트가 처음 화면에 나왔을 때 한번 실행된다.보통 여기서 API불러오기 같은걸 한다.componentDidUpdate(prevProps, prevState) { console.log("값이 바뀌었어요!");}State나, .. 📘CRA(Create React App)란? ✅ CRA(Create React App)란?React 애플리케이션을 빠르게 시작할 수 있도록 도와주는 공식 CLI 도구 이다.복잡한 설정 없이 기본적인 React 프로젝트 구조를 자동으로 생성해준다.✅ CRA가 해주는 일webpack,Babel등 복잡한 설정 자동화개발용 서버 실행 (npm start)프로덕션용 빌드 ( npm run build ) 테스트 환경 구축(npm test)Lint,Hot Reload 등 개발 편의 기능 내장✅ CRA로 프로젝트 생성하기npm create-react-app my-appcd my-appnpm start npx는 npm 5.2 이상에서 제공되는 명령어로, 설치 없이 최신 CRA를 실행할 수 있다.✅ 특징 항목설명확장성npm run eject를 통해 설정 수정 가능 .. 📘React useState(상태관리) ✅ 상태(state)란?컴포넌트 안에서 바뀔 수 있는 데이터이 데이터가 바뀌면 화면도 자동으로 다시 그려진다.🍼 아주 쉬운 설명화면에 보여지는 값 중에서 바뀔 수 있는 것 🧊 예시 1: 얼어붙은 값 (상태 아님)p>안녕하세요p>이건 절대 안바뀌는 고정된 글자, 이건 상태가 아니다.🧊 예시 2: 버튼을 누를 때마다 숫자가 바뀜p>숫자: 0p> ← 처음엔 0 👇 버튼 클릭 → 숫자: 1 👇 또 클릭 → 숫자: 2 이렇게 바뀌는 값이 바로 상태(State) 이다.사용자 행동이나 프로그램 흐름에 따라 변할 수 있는 값 💬 더 쉬운 말로 정리하면?상태란, React가 기억하고, 바뀌면 화면도 바꾸는 값 이다.✅ 변수를 사용하면 안되나?let count = 0;function increas.. 📘React props ✅ props란?부모 컴포넌트가 자식 컴포넌트에게 주는 데이터props는 properties의 줄임말즉, 컴포넌트에 값을 전달하는 방법 🍼 아주 쉬운 예부모 컴포넌트function App() { return ( Greeting name="민수" /> );} 자식 컴포넌트 function Greeting(props) { return h1>안녕하세요, {props.name}님!h1>;} 출력 결과 // 안녕하세요, 민수님!✅ 이해 포인트Greeting 컴포넌트는 name이라는 props를 받음props.name 으로 그 값을사용함App에서 name="민수"라고 줬기때문에-> props.name은 "민수"가 됨✅ 여러개도 사용 가능 // 부모 컴포넌트Greeting name="민수" age={20.. 📘구조분해할당(Destructuring Assignment) ✅ 구조분해할당 (Destructuring Assignment) 이란?배열이나 객체의 값을 쉽게 변수로 추출해서 저장할 수 있는 문법💡 더 쉬운 설명꺼내쓰기 쉽게 만든 문법📦 배열에서 꺼내기const fruits = ['🍎', '🍌', '🍇'];const [a, b, c] = fruits;a = 🍎b = 🍌c = 🍇즉, 배열안에 있는걸 순서대로 변수에 담아주는 것 📦 객체에서 꺼내기const user = { name: '민수', age: 20 };const { name, age } = user; name = '민수'age는 20즉, 객체 안에 있는 값을 키 이름으로 꺼내주는 것❓ 왜 사용할까?const name = user.name;const age = user.age;원래는 이렇게 사.. 📘React JSX란? ✅ JSX 란?JavaScript XML의 약자이다.리액트에서 HTML처럼 보이는 문법const element = h1>안녕하세요!h1>;그냥 HTML같지만 사실은 자바스크립트 코드이다.JSX는 브라우저가 이해할 수 있도록 자바스크립트로 변환된다.그래서 리액트 컴포넌트 안에서 UI를 작성할 때 많이 사용한다.✅ JSX 장점HTML처럼 직관적으로 UI를 작성할 수 있다.자바스크립트 변수나 표현식을 쉽게 쓸 수 있다.컴포넌트 안에서 UI와 로직을 함께 관리하기 편하다.✅ JSX 안에 자바스크립트 넣기const name = '민수';const element = h1>안녕하세요, {name}님!h1>;JSX안에서는 중괄호{} 를 사용해서 자바스크립트 표현식을 넣을 수 있다.여기서 {name}은 자바스크립트 변수.. 이전 1 2 3 다음