React Study 1

목차

1. 컴포넌트 만들기
2. 상속
3. JSX
4. import

1. 컴포넌트를 만드는 방법

컴포넌트의 형태는 크게 두 가지로, 클래스 형태와 함수 형태가 있다. 기본 구조는 다음과 같다.

1) 클래스 형태로 만들 경우

class App extends Component {
	render() {
		return ( 
			<div>
				내용
			</div>
		);
	}
}
export default App;

-> App은 만들려는 컴포넌트의 이름이다. extends Component의 의미는 2번에서 알아보겠다. 클래스 형태로 만들어진 컴포넌트에는 꼭 render 함수가 있어야하며, render 함수 내부에서 JSX를 return해주어야한다. JSX란 위에 보이는 HTML같은 코드를 의미하는데, 자세한 것은 3번에서 알아보겠다. 마지막에 export default App은 작성한 컴포넌트를 다른 곳에서 불러서 사용할 수 있도록 내보내주는 역할을 한다.

2) 함수 형태로 만들 경우

function App() {
	return (
    
	);
}

export default App;

또는 화살표 함수를 사용할 수도 있다. 위의 함수와 의미는 같다.

const App = () => {
	return (
    
	);
}

export default App;

const는 한 번 선언하고 바뀌지 않는 값을 정의할 때 즉, 재정의할 필요 없는 함수(또는 변수)의 경우에만 붙여준다. 그렇지 않은 경우에는 const대신 let을 붙여준다.

const -> 한번 정의하고 나면 나중에 바뀔 일 없음
let -> 나중에 바뀔 수도 있음

2. 상속

1.-1)의 코드에서 extends Component는 상속을 뜻한다.
class (child) extends (parent) 의 의미이다. 즉 1.-1)의 코드는 새로 만들려는 App이라는 컴포넌트가 Component라는 컴포넌트를 상속 받는다는 의미이다.

3. JSX

얼핏 보기에는 html과 비슷해보이지만 자바스크립트이다. html과 비슷한 문법으로 작성하면 자바스크립트 형태로 변환시켜준다. 몇 가지 규칙이 있다.

1) 태그 닫기

간단하다. <div> 태그를 열었으면 </div> 를 통해 다시 닫아주면 된다. html에서는 <input> <br> <hr> 과 같은 태그는 닫지 않을 때도 있는데, 리액트에서는 반드시 닫아 주어야 한다. <input />처럼 닫을 수도 있다.

2) 감싸져야하는 엘리먼트

두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다. 에를 들면, <div> 하나 </div> <div> 둘 </div> 이라는 코드는 오류가 난다. 이를 해결하기 위해서는 다음과 같이 이 두 엘리먼트를 다시 감싸주면 된다. (div대신 Fragment를 사용해도 됨)
<div> <div> 하나 </div> <div> 둘 </div> </div>

3) JSX 안에서 자바스크립트 사용하기

다음과 같은 코드가 있다고 치자.

render() {
    const name = 'react';
    return (
      <div>
        hello { name }!
      </div>
    );
 }

출력 값 : hello react!

JSX 안에서 자바스크립트 형식으로 정의한 변수 name을 사용하고 싶을 때는 중괄호를 사용하여 불러오면 된다.

4. import

import를 한다는 것은 무엇을 불러온다는 것이다.

import 파일명 from ‘파일위치’;
ex) import React, { Component } from ‘react’;

위의 코드는 React와 그 내부에 있는 Component를 불러온다는 뜻이다. JSX를 사용하기 위해서는 반드시 React를 import 해주어야한다. 또한, 내가 만든 다른 js파일이나 css파일 등을 다른 페이지에서 불러오고 싶을 때도 그 파일을 import 해주어야 한다.

다음에는 state, props, lifecycle 등에 대해 올리겠다.