목요일 - 목표
📍React 기초 완강
📍React 환경 세팅하기
📍컴포넌트, JSX, Props
👀 새해!
어느덧 2025년 아자자
▶️ React 기초 완강
자바 문법 복습
▶️ React 환경 세팅
터미널에서 yarn 설치 후 CRA(Create React App)를 활용하여 리액트 웹 생성
Vite 비트로 리액트 웹 생성 -> CRA 보다 훨씬 시간이 적게 들고 효율적이다.
VScode로 코드 살펴보고 vite -> 비트 변경
이름 생성의 차이 : 카멜케이스 vs 파스칼케이스
▶️ 컴포넌트, JSX, Props
컴포넌트 만들기 실습
언제 p를 쓰고, 언제 span을 써야 하나?
p 사용: 문단 단위의 텍스트를 구성할 때.span 사용: 문단 내 텍스트의 일부분에 스타일을 적용하거나 동적으로 조작할 때.
즉, span은 세부 조정과 동작을 위한 텍스트 조각 컨테이너로 쓰이며, 구조적으로 중요한 의미가 없으므로 가볍고 효율적으로 사용됩니다.
부모-자식 컴포넌트
컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를
부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를
자식 컴포넌트라고 부릅니다.
부모 - 자식 컴포넌트 실습
EXTENSIONS 를 활용하여 기본 틀 불러내기
블럭 안에서 스타일 적용하면 나중에 너무 길어질 경우 가독성이 안 좋다. 스타일 선언을 활용하면 효과적으로 컨트롤할 수 있다.
props로 값 전달하기
개발자 도구의 콘솔을 살펴보면 렌더링 되지 않았어도 부모 자식 간의 컴포넌트 정보가 잘 전달되고 있다.
💭
화면이 실현되는걸 보면서 코드를 작성하니까 훨씬 재밌다!