React 시작 #1

#1 시작!

리액트란?

• 리액트는 자바스크립트 기반의 프로그램으로 2013년에 페이스북 측에서 처음으로 릴리즈되었다.

작업환경 준비 )

코드 에디터가 있다는 가정하에, 우선 Node.js에서 LTS 버전 파일을 다운로드한다.

https://nodejs.org/en/

코드 에디터로 대중적인 Visual Studio Code (비주얼 스튜디오)를 사용할 것 이다.

그리고 에디터를 키고 터미널을 클릭해서 다음 명령어를 실행하면된다.

$ npx create-react-app begin-react

begin-react는 디렉토리 이름이라 본인이 희망하는 이름으로 지정해도 된다.

그리고 다음 명령어르 실행하면된다.

$ cd begin-react
$ npm start

npm start를 입력하면, 브라우저에 http://localhost:3000/ 가 열리면서 처음 리액트 페이지가 생성된다.

첫 번째 리액트 컴포넌트

src 디렉토리에 Hello.js라는 파일을 생성한다.

다음으로 밑에 있는 코드를 작성한다.

Hello.js

import React from "react";

function Hello() {
    return <div>안녕하세요</div>
}

export default Hello;

중요한 점은

import React from 'react';

위의 있는 코드를 꼭 작성해야 리액트 컴포넌트 사용이 가능하다.

또한...

export default Hello;

마지막에 위의 코드를 작성해야 해당 컴포넌트를 다른 파일로 내보낼 수 있다.

리액트 컴포넌트는 함수형태뿐만 아니라 class 형태로도 작성이 가능하다.

예 ) class형태 컴포넌트

class Welcome extends React.Component {
    render() {
      return <h1>Hello</h1>;
    }
}

Hello 컴포넌트를 App.js에 불러오겠다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

결과 :

참고로!

컴포넌트를 작성할 때는 무조건 대문자로 시작해야한다.

소문자는 태그로 인식한다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

불필요한 코드들은 지워버렸다.

위의 코드에서 ReactDOM.render은 브라우저에 있는 DOM 내부에 리액트 컴포넌트를 렌더링한다는 뜻이다.

그리고 알아야 할 점은

ReactDOM.render(자식, 부모)
첫 번째 인자로는 감쌀 자식 태그를 뜻하며, 두 번째 인자는 첫 번째 태그를 감쌀 부모 태그이다.

그리고 위에서 id가 root인 태그를 선택했는데,

public 디렉토리안에 index.html안에

를 뜻한다.

그러면 JSX란?

• 자바스크립트의 확장 문법 (JavaScript + XML)

쉽게 말하면 HTML 문법을 리액트에서도 쓸 수 있게끔 해준다.

예 )

참고 : 벨로퍼트와 함께하는 모던 리액트

느낀점 :

• 아직까지 리액트를 공부하고 있지만 잘 모르는 것도 많고 헷갈리는 부분이 있다.
• 새로운 마음가짐으로 공부해서 완전히 내것으로 만들고싶다.

다들 화이팅!