Quick Start

React와 영어를 같이 공부해보자는 마음으로 조금씩이라도 react의 learn 페이지를 번역해 보기로 하였습니다.

번역기와 저의 오역으로 맞지 않는 내용이 있을 수 있으니 참고만 하시면 좋을 듯 합니다.

 

번역을 한 사이트는 하기와 같습니다.

https://react.dev/learn

Quick Start – React

Quick Start

 

Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.

React 문서에 오신것을 환영합니다! 이 페이지는 너에게 매일 기본적으로 사용할 React 개념의 80%를 소개합니다.

 

You will learn

너가 배울 것

 

-   How to create and nest components

구성 요성를 만들고 중첩하는 방법
> nest : 둥지, 집, 둥지를 틀다, 끼워 넣

 

-   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

구성요소 생성 및 중첩

 

React apps are made out of _components_. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React 앱은 구성 요소로 만들어진다. 구성요소는 고유한 로직과 모양이 있는 UI(사용자 인터페이스)의 일부이다. 구성요소는 버튼만큼 작을 수도, 전체 페이지만큼 클 수도 있다.
>appearance : 모습, 외모, 나타남, 출현, 모습을 보임
>entire : 전체의, 온

 

React components are JavaScript functions that return markup:

React의 구성 요소는 마크업을 반환하는 JavaScript 함수이다.

function MyButton() {
	return (    
		<button>I'm a button</button>
	);
}

Now that you’ve declared `MyButton`, you can nest it into another component:

이제 MyButton을 선언했으므로 다른 컴퍼런트에 중첩할 수 있다.
>declared : 선언하다, 언명하다, 분명히 말하다, 신고하다

 

export default function MyApp() {  
	return (    
		<div>
			<h1>Welcome to my app</h1>
			<MyButton />    
		</div>  
	);
}

Notice that `<MyButton />` starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.

<MyButton />은 대문자로 시작한다. 그것이 React 컴퍼런트인 것을 아는 방법이다. React 컴퍼런트는 항상 대문자로 시작해야 하며 HTML 태그는 소문자여야 한다.
>capital : 수도, 자본금, 자금, 사형의, 대문자의

 

The export default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax, MDN and javascript.info have great references.

export default 키워드는 파일의 메인 컴퍼런트를 지정한다. 만약 너가 JavaScript 구문에 익숙하지 않을 경우 MDN 및 javascrip.info에서 훌륭한 참고 자료를 찾을 수 있다.
>specify : 명시하다