리액트 시작

 

 

vscode에 리액트 앱을 create 했으면 여러 파일들이 생기는데 여기서 이름 변경하면 안되는 파일은 public > index.html 과 src > index.js 파일이다.

 

index.html 은 페이지의 템플릿을 나타내며 index.js 는 자바스크립트의 시작점으로 이름을 절대 변경하면 안된다.

 

 

 

 

 

 

● 리액트 시작하기

 

터미널 창에 npm run start 를 입력한다.

끄려면 터미널 창에 ctrl + c 를 누르면 다시 터미널 창에서 명령어를 입력할 수 있다.

( 코드를 작성하면서 중간중간 확인하고 싶을 땐 제일 처음 프로그램에 들어가서 프로그램의 콘솔창에 npm run start를 입력해준 뒤 ctrl + s를 눌러 중간저장하여 새로고침 해주면 바로바로 확인 할 수 있다.)

 

 

엔터를 하면 밑에처럼 스타트가 나타나지고

 

 

이렇게 리액트가 실행되는 것을 확인 할 수 있다.

 

 

 

 

 

코드 설명을 하면 public의 index.html에서 div인 root는 현재 보이는 리액트 화면을 나타내고 있고

 

 

 

 

이 root를 src의 index.js에서 요소로 잡고 있다.

 

여기서 10번째 줄에 있는 <App /> 부분이 src의 App.js 부분을 나타내는데 여기서 작성된 코드가 현재 보이는 페이지의 로고와 글씨 부분을 나타내고 있다.

 

그래서 이 코드에서 작성된 Learn React 문장을 고치면 페이지에 고쳐진 문장으로 나타나게 된다.

App()은 함수형 컴포넌트

 

 

- 수정 후

 

 

 

 

● 컴포넌트

리액트 컴포넌트는 두가지가 있다.

 

- 클래스형 컴포넌트 (Class Components)

 

 

- 함수형 컴포넌트 (Functional Components)

 

원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트  Hooks 라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 개발을 많이 한다.

 

 

 

 

● JSX

- JSX를 사용하면서 주의해야 할 문법들(문법 규칙)\

JSX를 사용하면서 지켜줘야할 규칙이 많은데 

그 중 첫번째는 JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.

 

<잘못된 코드>

function hello(){
	return (
    	<div>HELLO WORLD!</div>
        <div>what are you doing</div>
    )
}

 

 

<올바른 코드>

funciton hello() {
	return <div>
    	<div>HELLO WORLD!</div>
        <div>what are you doing</div>
    </div>
}