FRONT

리액트의 기본, JSX 문법과 컴포넌트 만들기

Okguri 2022. 2. 6. 21:49

리액트는 왜 쓰나요?

재사용, 우려사항을 분리하기 위해. 코드를 작고 관리할 수 있는 규모.

커다란 html, js파일을 가지고 있을 수 있음. 각 컴포넌트가 하나의 사항에 대해서만 집중할 수 있게 된다. ㅗ드를 여러 개의 파일로 나누면 단위별로 코드를 관리하기 쉽다. 하나의 함수는 하나의 역할을 하는, 고런ㄴ 느낌.

컴포넌트는 어떻게 만드나?

유저 인터페이스는 html, css js가 결함한 거다. 리액트로 자겁하고 컴포넌트를 만들 때도 똑같음. 이 셋을 같은 컴포넌트로 묶고 사용자 인터페이스를 만듦. 리액트 컴포넌트에서 가장 중요한건 html, js다.

리액트는 컴포넌트로 만든다. 컴포넌트는 js, html, css로 만든다. 리액트는 선언 접근 방식이다. 나만의 고유한 html 엘리먼트를 만들 수 있다.

create react app 실행 위해서는 node.js가 필요하다.

리액트 프로젝트 분석

  • index.js : 가장 첫 번째로 실행되는 파일. reactDOM을 임포트해옴. index.html을 컴포넌트로 대체해 렌더링함.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render( //ReactDom를 임포트해, 그 컴포넌트가 갖고 있는 render 함수를 실행
  <React.StrictMode>
    <App /> //App.js에서 export한 App 컴포넌트를 import해옴
  </React.StrictMode>,
  document.getElementById('root') //index.html에 있는 <div id="root"></div>를 지칭
); //
  • package.json : 리액트 설정.
  • index.html : 하나의 html 파일이 브라우저에 전달됨. root id를 가지는 div 한 개만 있음. 이 root를, <App/>으로 대체해야 한다. App은 App.js에서 import 해온다.
  • App.js : 컴포넌트가 담김

결국 브라우저가 렌더링하는 html 파일은 index.html 하나!

JSX

자바스크립트 내 html 코드. html을 js로 변형해 받는 역할을 한다. 우리가 작업하는 코드는 html이 아니지만, 리액트에 의해서 컴포넌트의 JSX가 html로 변환돼 화면에 나타난다.

리액트 작동방식

리액트는 선언형 접근방식을 취한다. 타겟 state를 정의하고, 리액트가 JavaScript DOM에서 그것을 관리할 수 있도록 하는 거. target state는 function App(){ return()} 즉 컴포넌트라고 할 수 있을 듯. 이게 변경될 때마다 자동으로 렌더링해주는 방식이다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit and save to reload.
        </p>
      </header>
    </div>
  );
}
**return 안에 담긴 코드가 최종 상태다. 안의 내용이 바뀔 때마다 react가 새로 렌더링해준다. 
내용이 바뀌면 리액트가 지시를 생성해서 화면으로 가져오는 것이라고 생각하면 된다.** 

export default App;

보통의 JS는 단계 한 땀 한 땀 설정한다. 1) 타겟을 정하고 2) 그 타겟에 단계별로 명령을 써주고 3) 렌더링함. 이를 명령형 접근방식이라고 한다.

컴포넌트 만들기

중요! 컴포넌트란 JS 함수일뿐! jsx 코드를 리턴하는 함수!!!!!!!!!

컴포넌트에서 태그를 쓸 때 주의. 소문자로 html 엘리먼트를 만들고, 대문자로는 컴포넌트를 만든다.

하나의 return당 하나의 루트 요소가 있어야 한다.

return (
<div>안녕</div>
<div>안녕</div>); 같은 건 못한다는 뜻

따라서 다음과 같이 하나의 div로 감싸주는 걸 추천

return (
<div>
	<div>안녕</div>
	<div>안녕</div>
</div>
);

컴포넌트 css 적용하기

  1. css 파일 만들기
  2. css 적용할 js 파일에 css 임포트하기
  3. JSX의 html 태그에 className=”” 으로 css 클래스 지정
import "./ExpenseItem.css";
function ExpenseItem() {
  return (
    <div className="expense-item">
      <div>January 31th 2022</div>
      <div className="expense-item__description">
        <h2>Car Insurance</h2>
        <div className="expense-item__price">$294.67</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

JSX에서 JS 코드 쓰기 : { }

{ } 중괄호 안에 JS 코드를 사용할 수 있다.

참고 : 날짜 객체는 string이 아니라 바로 출력 불가하므로, string으로 변환해야 함!