React 학습하기 > UI 표현하기 요약

학습하기 > UI 표현한기React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리다. React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합할 수 있다.첫 번째 컴포넌트React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수이다.표기 시 대문자로 시작하는 경우 React 컴포넌트로 사용하고자 한다고 이해하므로 대소문자 표기 시 주의.컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안된다.핵심사항React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있다.React 앱에서 모든 UI는 컴포넌트이다.React 컴포넌트는 다음 몇 가지를 제외하고는 일반적안 JavsScript 함수이다.컴포넌트 이름은 항상..

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

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