본문 바로가기

이것저것 스터디📚/React - 공식 문서

 (52)
React 공식문서 - Importing and Exporting Components 컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합해 다른 컴포넌트를 만들 수 있다는 점이다. 컴포넌트를 여러 번 중첩하게 되면 다른 파일로 분리해야 하는 시점이 생기는데, 이렇게 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해진다. The root component file(루트 컴포넌트 파일) CRA(Create React App)에서는 앱 전체가 src/App.js라는 root 컴포넌트에서 실행된다.(설정에 따라 root 컴포넌트가 다른 파일에 위치할 수도 있다.) * Creact React App CRA는 Create React App의 약어로, 초기 설정과 번들링 등의 작업을 자동화하여 React 애플리케이션을 쉽게 생성하기 위한 도구입니다. CRA를 사용하면 개발 환경 구성을 위한..
React 공식문서 - Your First Component(첫번째 컴포넌트) Components: UI building blocks(컴포넌트: UI 구성 요소) React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"로 결합할 수 있고, HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인할 수 있다. 프로젝트가 커질수록 컴포넌트의 재사용은 많은 디자인을 구성할 수 있게 해주고 개발 속도를 빠르게 해준다. Defining a component(컴포넌트 정의하기) 기존의 웹페이지 개발에서는 웹 개발자가 콘텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했다면, React 컴포넌트는 마크업으로 뿌릴수 있는 JavaScript 함수다. Step 1: Export the co..
React 공식문서 - Thinking in React JSON API와 디자이너의 목업이 있다고 가정을 했을 때, React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내하는 챕터. React에서 UI를 구현하려면 일반적으로 동일한 5단계를 따른다. Step 1: Break the UI into a component hierarchy(UI를 컴포넌트 계층 구조로 나누기) 목업의 모든 컴포넌트와 하위 컴포넌트 주위에 상자 그리고 이름을 정한다. 컴포넌트는 단일 책임 원칙(single responsibility principle) 기법에 따라 이상적으로 한 가지 일만 수행해야 한다. 만약 컴포넌트가 늘어나게 되면 더 작은 하위 컴포넌트로 분해해야한다. 목업에서 컴포넌트를 식별했다면, 계층 구조로 정렬한다. Step 2: Build a stati..
React 공식문서 - Quick Start Creating and nesting components(컴포넌트 생성 및 중첩하기) React 앱은 컴포넌트로 만들어진다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수로써, 고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부이며, 버튼만큼 작을 수도 있고 전체 페이지만큼 클수도 있다. * MyButton이라는 컴포넌트 선언 function MyButton () { return ( I'm a button ); } * 선언된 MyButton 컴포넌트를 다른 컴포넌트에 중첩 export default function MyApp() { return ( Welcome to my app ); } 위의 예제와 같이 React 컴포넌트는 대문자로 시작하고, HTML 태그는 소문자로 시작한다..

티스토리툴바