Quick Start
React 문서에 오신 것을 환영합니다! 이 페이지는 일상적으로 사용하는 React 개념의 80%에 대해 설명합니다.
배우게 될 것
- 컴포넌트 생성 및 중첩 방법
- 마크업 및 스타일 추가 방법
- 데이터 표시 방법
- 조건 및 목록 렌더링 방법
- 이벤트에 대응하고 화면을 업데이트하는 방법
- 컴포넌트 간 데이터를 공유하는 방법
컴포넌트 생성 및 중첩
리액트 앱은 컴포넌트 로 만들어집니다. 컴포넌트는 고유의 논리와 모양이 있는 UI(useri nterface)의 일부입니다. 컴포넌트는 버튼만큼 작을 수도 있고 전체 페이지만큼 클 수도 있습니다.
리액트 컴포넌트는 markup을 반환하는 JavaScript 함수입니다.
function MyButton() {
return (
<button>I'm a button</button>
);
}이제 선언한 MyButton을 다른 컴포넌트에 중첩할 수 있습니다.
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}주의해주세요. <MyButton />은 대문자로 시작합니다. 그게 리액트 컴포넌트라는 걸 알 수 있는 방법이죠. 리액트 컴포넌트의 이름은 항상 대문자로 시작해야 하며, HTML 태그는 소문자로 시작해야 합니다.
결과 확인!
// App.js
function MyButton() {
return (
<button>
I'm a button
</button>
);
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
export default 키워드는 파일의 주요 컴포넌트를 지정합니다. JavaScript 구문에 익숙하지 않은 경우 MDN 및 javascript.info을 참조하세요.
JSX로 마크업 작성하기
위에서 본 마크업 구문을 JSX 라고 합니다. 선택사항이지만, 대부분의 React 프로젝트에서는 편의상 JSX를 사용합니다. 로컬 개발을 위해 권장하는 모든 도구는 기본적으로 JSX를 지원합니다.
JSX는 HTML보다 엄격합니다. <br />과 같이 태그를 닫아야 합니다. 컴포넌트는 여러 JSX 태그들을 반환할 수도 없습니다. <div>...</div> 또는 빈 <>...</> 래퍼와 같은 공유 부모로 감싸야 합니다.
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}JSX에 포팅하기 위한 HTML이 많은 경우, online converter를 사용할 수 있습니다.
이식(移植) 또는 포팅(porting)은 컴퓨터 과학에서 실행 가능한 프로그램이 원래 설계된 바와 다른 컴퓨팅 환경(이를테면 CPU, 운영 체제, 서드 파티 라이브러리 등)에서 동작할 수 있도록 하는 과정을 가리킨다. 이 용어는 소프트웨어나 하드웨어가 다른 환경에서 사용할 수 있게 변경되는 것에도 해당한다. 소스 하나로 여러 플랫폼에서 사용할 수 있는 것을 크로스 플랫폼으로 부른다. (위키백과 이식 (컴퓨팅))
Adding styles
이어서..
리액트로 사고하기
React는 당신이 보는 디자인과 만드는 앱에 대한 생각을 바꿀 수 있습니다. React를 사용하여 사용자 인터페이스를 구축할 때 먼저 컴포넌트라는 여러 조각으로 분리합니다. 그런 다음 각 컴포넌트의 다양한 시각적 상태를 묘사합니다. 마지막으로 데이터가 컴포넌트를 통해 흐르도록 함께 연결합니다. 이 튜토리얼에서는 React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내합니다.
mockup부터 시작
- mock-up? 사전적 의미로는 제품 평가를 위해 만들어지는 실물 크기의 정적 모형.
이미 JSON API와 디자이너의 목업이 있다고 상상해 보세요. JSON API는 다음과 같은 데이터를 반환합니다.
[
{ category: "Fruits", price: "$1", stocked: true, name: "Apple" },
{ category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
{ category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
{ category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
{ category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
]목업은 다음과 같습니다.
Step 1: UI를 컴포넌트 계층 구조로 나누기
먼저 목업의 모든 컴포넌트와 하위 컴포넌트 주위에 상자를 그리고 이름을 지정합니다. 디자이너와 함께 작업하는 경우 디자인 도구에서 이런 컴포넌트의 이름을 이미 지정했을 수 있습니다. 그들에게 확인하세요!
배경에 따라 다양한 방식으로 디자인을 컴포넌트를 분할하는 방법을 생각할 수 있습니다.
- 프로그래밍—새로운 함수 또는 객체를 만들 것인지 여부를 결정할 때 동일한 기술을 사용합니다. 그러한 기술 중 하나는 단일 책임 원칙입니다. 즉, 구성요소는 이상적으로 한 가지 일만 수행되어야 합니다. 만약 그것이 자라게 되면, 그것은 더 작은 하위 컴포넌트로으로 분해되어야 합니다.
- CSS—클래스 셀렉터의 용도를 고려합니다(단, 컴포넌트는 조금 세밀하지 않습니다).
- 디자인—디자인 레이어를 구성하는 방법을 고려합니다.
JSON이 잘 구성되어 있으면 UI의 컴포넌트 구조에 자연스럽게 매핑되는 경우가 많습니다. UI와 데이터 모델은 정보 아키텍처가 동일한 경우가 많기 때문에 모양도 동일합니다. 각 컴포넌트가 데이터 모델의 한 부분과 일치하는 컴포넌트로 UI를 분리합니다.
이 화면에는 5개의 컴포넌트가 있습니다.
FilterableProductTable(회색)에는 앱 전체가 포함되어 있습니다.SearchBar(파란색)은 사용자 입력을 받습니다.ProductTable(라벤더) 사용자 입력에 따라 목록을 표시하고 필터링합니다.ProductCategoryRow(녹색)은 각 카테고리의 제목을 표시합니다.ProductRow(노란색)은 각 제품의 행을 표시합니다.
보시면 ProductTable (라벤더) 테이블 헤더('Name' 및 'Price' 라벨 포함)는 자체 컴포넌트가 아님을 알 수 있습니다. 이건 취향의 문제니까 어느 쪽으로든 갈 수 있어요. 이 예제에서는 ProductTable의 목록에 나타나기 때문에 ProductTable의 일부입니다. 단, 이 헤더가 복잡해지면(예를 들어 정렬을 추가하는 경우), 이 자체 ProductTableHeader 컴포넌틀르 만드는 것이 타당합니다.
목업에서 컴포넌트를 식별했으므로 이제 계층 구조로 정렬하십시오. 목업의 다른 컴포넌트 내에 표시되는 컴포넌트는 계층에서 하위 컴포넌트로 나타나야 합니다.
- FilterableProductTable
- SearchBar
- ProductTable
- ProductCategoryRow
- ProductRowStep 2: React에서 정적 버전 구축
