React(리액트)

리액트의 대해 알아봅시다.

리액트를 시작 하기 위해선 먼저 프로젝트를 만들어야 합니다.

1. 파일 생성과 파일 살펴보기

$ npx create-react-app 프로젝트이름

생성이 완료 되었다면 리액트 실행은 아래와 같이 합니다.

$ npm start 

http://localhost:3000/ 이 열리고 기본 리엑트 로고가 보입니다.

생성되는 파일에서 index.js / App.js 가 보입니다.

index.js 파일을 열어 보면

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

라는 파일이 보입니다.

ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미합니다.

public/ index.html을 열어서 보면

<div id="root"></div>

을 찾아 볼 수 잇다. 결국 리엑트 컴포넌트가 렌더링 될때에는 렌더링된 결과물이 위 div 내부에 렌더링되는 것 입니다.

2. JSX

리액트에서는 html 과 비슷해보이지만 약간의 규칙이 다른 JSX를 이용해야합니다.
1 - 태그는 꼭 닫혀 있어야합니다. ! (태그와태그사이 내용이 들어가지 않을때에는 Self Closing태그 라는것을 사용해야합니다.)
2 - 두개이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다. (불필요한 태그를 이용해서 감싸야한다면 <> </> 같은 Fragment로 감쌀 수 있습니다. 브라우저 상에서는 별도의 엘리먼트로 나오지 않습니다.
3 - JSX 내부에서 자바스크립트를 이용하기 위해서는 {} 중괄호를 이용합니다.
4 - JSX태그에서 class를 지정할땐 classname으로 해야합니다.
5 - 인라인 스타일로 지정 할때는 background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.

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

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

3. props

우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다.
예를들어 App컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 가정해 봅시다.
App.js

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

function App() {
  return (
    <Hello name="파닥몬" />
  );
}

export default App;

Hello.js

import React from 'react';

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

export default Hello;

여기서 구조분해할당을 이용하면 조금더 간결하게 작성 할 수있습니다.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

4.state

state는 컴포넌트 안에서 관리 되며 렌더링 결과물에 영향을 주는 정보를 갖고 있다.
class constructor 안에서 state를 선언한다.
state의 값은 setState로 변경 할 수 있다.

import mockMovie from './mockMovie'
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentMovie: mockMovie[0],
      movies: mockMovie
    };
  }
  
  handleCardClick(movie) {
  this.setState({ currentMovie: movie });
  }