React 공식문서 (번역, 공부)
Importing and Exporting Components
React에서 UI를 컴포넌트로 나누어서 사용했을 때의 가장 큰 장점은 재사용성이다. 그리고 한 컴포넌트는 다른 컴포넌트와의 중첩을 통해 만들 수 있다. 따라서 헷갈리지 않고, 깔끔하게 유지하기 위해 컴포넌트를 분할하고, 그 과정에서 각각의 컴포넌트는 다른 파일로 관리할 수 있다. 이렇게 다른 파일로 관리하게 될 때 한 컴포넌트에서 다른 컴포넌트를 사용하기 위해 그 컴포넌트를 가져와야 하고, 또 그 파일에선 해당 컴포넌트를 내보내야 다른 파일에서 가져올 수 있게 된다. 컴포넌트 내보내기 및 가져오기 컴포넌트를 넣을 새 JS 파일을 만든다. 해당 파일에서 컴포넌트 함수를 내보낸다. 컴포넌트를 사용할 파일로 해당 컴포넌트를 가져온다. 동일한 파일에서 여러 컴포넌트 내보내기 및 가져오기 지금까지는 export..
Your First Component
컴포넌트 정의 1단계: 컴포넌트 내보내기 표준 JavaScript 구문에서 export default 키워드로 현재 파일에 존재하는 컴포넌트를 내보낼 수 있다. 내보내게 되면 다른 파일에서 이 컴포넌트를 import 해와서 사용할 수 있다. 2단계: 함수 정의 컴포넌트도 결국 React에서 화면에 렌더링하기 위한 함수이다. 따라서 함수를 정의해주면 된다. 이 때 주의할 점은 React 컴포넌트 또한 일반 JavaScript 함수라고 말했지만, 이름은 무조건 대문자로 시작해야 한다. 그렇지 않으면 일반 HTML 태그로 인식하기 때문에 작동하지 않는다. 3단계: 마크업 추가 만약 img 태그를 반환한다고 하면 다음과 같이 작성할 수 있다. HTML 처럼 보이지만 JavaScript이다. (JSX) retur..
Describing the UI
UI 설명 React는 UI 렌더링을 위한 JavaScript 라이브러리이다. React를 사용하면 재사용 가능하고 중첩 가능한 구성 요소로 결합할 수 있다. JSX로 마크업 작성하기 일단 JSX에 대해 알아볼 필요가 있다. JSX는 HTML과 비슷하게 생겼지만, JavaScript를 확장한 문법이다. const name = 'Minjun Kim'; const element = Hello, {name} 위와 같이 HTML 태그로 이루어진 element 자체를 변수로 선언하여 할당할 수 있다. JSX의 중괄호 안에는 모든 JavaScript 표현식이 들어갈 수 있다. 따라서, 예를 들어 어떤 태그에 속성을 동적으로 추가하고 싶을 경우 JSX를 활용할 수 있다. 또 JSX를 활용함으로써 많은 속성을 넣게 되..
Tutorial: Tic-Tac-Toe
Tutorial: Tic-Tac-Toe You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. 이 튜토리얼 동안 작은 tic-tac-toe 게임을 만들것입니다. 이 튜토리얼은 기존에 알고있던 React 지식을 필요로 하지 않습니다. 이 튜토리얼에서 배울 기술은 Re..
Quick Start
Quick Start You will learn How to create and nest components How to add markup and styles How to display data How to render conditions and lists How to respond to events and update the screen How to share data between components 배울것 컴포넌트를 만들고 중첩하는 방법 마크업과 스타일을 추가하는 방법 데이터를 보여주는 방법 조건과 리스트를 렌더하는 방법 이벤트에 응답하고 화면을 업데이트 하는 방법 컴포넌트들 사이에 데이터를 공유하는 방법 Creating and nesting components (컴포넌트 만들고 중첩하기) Rea..