React로 사고하기 요약

React로 사고하기 요약React로 사용자 인터페이스를 빌드할 때, 먼저 컴포넌트 조각으로 나눈다. 그리고 각 컴포넌트의 다양한 시각적 상태들을 정의한다. 마지막으로 컴포넌트들을 연결하여 데이터가 그 사이를 흘러가게 한다.React로 UI를 구현하기 위해 일반적으로 다섯 가지 단계를 거친다.step 1: UI를 컴포넌트 계층으로 쪼개기step 2: React로 정적인 버전 구현하기상호작용 기능은 추가하지 않고 데이터 모델로부터 UI를 렌더링하는 버전 만들기. 데이터 모델을 렌더링하는 앱의 정적인 버전을 만들기 위해 다른 컴포넌트를 재사용하고 props를 이용하여 데이터를 넘겨주는 컴포넌트를 구현.step 3: 최소한의 데이터만 이용해서 완벽하게 UI State 표현하기UI를 상호작용하게 만들려면 사용자..

• format_list_bulleted Frontend/React
• · 2025. 5. 13.
• textsms

빠르게 시작하기 요약

빠르게 시작하기 요약1. 컴포넌트 생성 및 중첩하기React 앱은 컴포넌트로 구성(컴포넌트는 고유한 로직과 모양을 가진 UI의 일부.)React 컴포넌트는 마크업을 반환하는 자바스크립트 함수function MyButton() {return I'm a button;}export default function MyApp() {return ( Welcome to my app );}다른 컴포넌트 안에 중첩할 수 있다. React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작.2. JSX로 마크업 작성하기React 프로젝트는 편의성을 위해 JSX 사용.HTML보다 엄격하여 닫기 태그 필수, 여러 개의 JSX 태그 반환 불가. div 또는 빈 래퍼와 같이 공유되는 부모..

• format_list_bulleted Frontend/React
• · 2025. 5. 13.
• textsms