React 공식문서 (번역, 공부)/Describing the UI

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를 활용함으로써 많은 속성을 넣게 되..