[리액트] - 개념, 컴포넌트, JSX

🟥 리액트는 무엇이고, 왜 사용할까 ?

리액트는 자바스크립트로 UI 개발을 하기위한 라이브러리입니다.

 

❓ 전통적인 웹 개발에서의 JavaScript 전통적인 자바스크립트는 웹 페이지에서 동적인 처리만을 담당했습니다. 웹 화면은 HTML과 CSS로 표현되고 화면 내에서 동적인 처리가 필요한 경우에 자바스크립트를 사용했습니다. 딱딱 역할 분담이 잘 되어있었는데, 왜 굳이 자바스크립트로 UI 개발을 하려는 것일까요?

 

웹 어플리케이션의 규모가 점점 더 커짐에 따라, 그만큼 어플리케이션 자체의 용량도 많이 늘어나게 되었고, 이로인해 속도는 갈수록 느려지기 시작했습니다.

 

보다 interactive하게 동적으로 동작하는 웹 사이트를 만들기 위해서 DOM(Doucment object Mode) 제어는 필요합니다.

하지만, 문제는 DOM 조작 API를 너무 자주 호출하는 것은 성능에 악영향을 준다는 것입니다.

 

CSS 계산, 레이아웃 잡기, 화면 리렌더링의 비용이 많이 발생하므로, 속도와 성능문제가 발생하는데 이를 리액트팀이 VirtualDOM 으로 해결했습니다.

VirtualDOM은 메모리상에 있는 DOM의 복사본인 '자바스크립트 객체'로, 화면 전환이 발생하면 as-is와 to-be 버전의 VirtualDOM을 비교하여 변경된 부분만 최소한의 DOM 조작을 통해 실제 UI에 적용합니다.

 

 

 

🟥컴포넌트 

리액트 앱은 컴포넌트로 만들어 집니다.

 

컴포넌트는 로직을 가지는 일종의 UI의 조각을 의미합니다.

컴포넌트는 버튼 하나로 표현될 수도있고, 페이지 전체로 표현될 수도있으며 재사용이 가능합니다.

 

 

컴포넌트는 마크업(Mark Up)을 반환하는 "자바스크립트 함수"입니다.

 

선언한 컴포넌트를 사용할 때는 항상 대문자를 사용해야 합니다. <MyButton />

export default 키워드는 파일에서 메인 컴포넌트에 지정합니다.

 

마크업 문법은 JSX를 사용합니다. optional이지만, 대부분의 리액트 프로젝트에서 사용하며 편리합니다.

 

ReactDOM.render를 이용해 리액트 컴포넌트를 실제 DOM에 렌더링합니다.

ReactDom은 react-dom 모듈을 불러와 사용할 수 있습니다.

리액트 버전 v17 이후부터는

React.createElement 를 사용해 리액트 컴포넌트를 실제 DOM에 렌더링합니다.

 

컴포넌트는 함수형 컴포넌트와 클래스형 컴프넌트 두 가지로 나뉩니다.

 

🔸 클래스형 컴포넌트

import { Component } from 'react';

class App extends Component {
  render() {
    const name="리액트";
    return <div className="react">{name}</div>;
  }
}

export default App;

클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 관리 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 장점이 있습니다.

또 클래스형 컴포넌트는 "render함수가 꼭 있어야 하고", 그 안에서 보여 주어야 할 JSX를 반환해야합니다.

 

🔸 함수형 컴포넌트

function App() {  // 화살표 함수도 가능
  const name = "리액트";
  return <div className="react">{name}</div>;
}

export default App;

함수형 컴포넌트의 장점은 우선 클래스형 컴포넌트보다 선언하기가 훨씬 편합니다.

큰 차이는 없지만, 메모리 자원도 클래스형보다 덜 사용하고요.

 

단점은 state와 라이프사이클 API 사용이 불가능하다는 점인데,

이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.

 

return 문에서는 리액트 엘리먼트를 반환해야 합니다.

공식문서에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

 

 

 

🟥 JSX

JavaScript 확장 문법으로 얼핏보면 HTML 같지만 실제로는 JavaScript입니다.

JavaScript정식문법은 아니며, Babel을 통해 JSX가 Javscript로 변환됩니다.

 

JSX는 HTML보다 엄격합니다.

태그는 무조건 닫아야하고(예. <br />), 꼭 하나의 최상의 태그로 감싼후 반환해야 합니다.

<div>...</div> 를 사용하거나 프래그먼트(<>...</>)를 사용합니다.

(이유는 리액트가 컴포넌트의 변화를 효율적으로 감지하려면 DOM Tree구조가 유지되어야 한다는 규칙이 있기 때문입니다.)

 

JSX를 사용하는 파일의 상단에는 항상 React import가 필요합니다.

import React from “react”;

 

❗리액트 17 버전 이후부터 package.json에서 바벨 프리셋 설정을 아래와 같이 진행하면 위에 import 구문은 생략 가능합니다. 

//"runtime" :"automatic"을 설정.
//리액트 컴포넌트마다 최상단에 react import구문 생략가능 
...
"babel": { 
  "presets": [ 
     [ "@babel/preset-react", 
       { "runtime": "automatic" } 
     ]
   ] 
 }
 ...

 

JSX 내부에 자바스크립트 표현식을 쓸 수 있습니다.

중괄호 { } 로 감싸면 됩니다.

 

JSX 에서 style 과 CSS class는 className으로 설정합니다.

인라인 스타일은 객체 형태로 작성 & camelCase 형태로 네이밍합니다.

 

예시 )

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

스타일이 자바스크립트 변수에 의존하는 경우 style속성을 사용할 수 있습니다.

위 JSX에문에서 style속성 지정시에는 {{}} 중괄호가 두겹으로 되어있는데,

스타일 속성은 객체{ } 형태로 지정하며 JSX의 중괄호{ } 문법으로 지정한 것입니다.

 

 

🔸 JSX의 조건부 렌더링

1. if문은 JSX안에서는 동작이 안되고, return 문 밖에서 사용 가능합니다.
2. .JSX안에서는 3항 연산자나 && 연산자를 활용한 조건부 렌더링이 가능합니다.

 

AND 연산자(&&)를 사용한 조건부 렌더링

return (<div> { name === '리액트' && <h1>리액트입니다.</h1>}</div>);

 

❗ 주의사항으로 falsy한 값인 0은 화면에 노출됩니다.

const number = 0;
return (<div> { number && <h1>숫자입니다.</h1>}</div>); // 0 노출

 

 

🔸 리스트 렌더링

for 루프 및 array의 map()함수를 이용해 구성요소를 순회할 수 있습니다.

리스트를 순회해서 <li>와 같은 요소를 생성하는 경우 key속성을 필수로 지정해야 합니다.

 

이유는 가상돔이 변경 점을 찾는 시간을 단축시키기 위함입니다.

key속성의 값은 유니크한 숫자나 문자열로 지정해야 합니다.

...
return (
    <ul>
      {userList.map((user) => (
        <li style={{ listStyle: 'none' }} key={user.id}>
          {user.name}
        </li>
      ))}
    </ul>
  )
  ...

 

🔸 JSX내부의 주석

{/* 이런 형태로 */}

열리는 태그 내부에서는 // 이런 형태로도 가능

 

 

-참고 및 출처

김정환님 인프런 리액트 강의

김민준님 리액트를 다루는 기술