38. React 기초 (1)

JSLEE·2024년 6월 19일
데브코스웹개발

리액트란?

리액트란, 다음과 같다.

  • React.js는 자바스크립트의 라이브러리이다.
  • SPA(Single Page Application), 모바일 어플리케이션이 개발 가능하다.

리액트에서 렌더링이란, 내부 코드에 의해서 HTML에 마크업 언어로 주입이 되는 것이다. (즉, 화면에 보여주는 것이다.)

리액트의 동작원리는 다음과 같다.

  • 초기 렌더링 : 처음의 화면을 구성
  • 가상 DOM 변경 : 특정 노드에서 변경사항이 있다면, 가상 DOM을 생성하고 기존 DOM과 비교한다.
  • 재조정 & 실제 DOM 업데이트 : 변경된 사항을 실제 DOM에 업데이트한다.

리액트의 사용방법에 대해서는 공식페이지에서 확인할 수 있다.

먼저, 공식 문서의 사용 방법대로 터미널에 다음의 명령어들을 입력해보겠다.

npx create-react-app my-app
cd my-app
npm start
  • npx create-react-app my-app : 해당 폴더에 리액트환경을 구성한다.
  • cd my-app : 해당 폴더로 터미널의 위치를 이동한다.
  • npm start : 개발 서버를 시작한다.

npx create-react-app my-app이라는 커맨드는 git init 또는 express-generator와 비슷한 느낌을 받았다.

어쨌든, 위 커맨드를 입력하면 해당 폴더에 react를 사용하기 위한 환경이 구축된다. (시간이 좀 걸린다.)

정상적으로 환경이 구축되었다면, 해당 리액트 폴더로 cd 명령을 통해 이동하고, npm start로 서버를 실행할 수 있다.

react는 typescript로 작성할 수 있도록 npx create-react-app my-app --template typescript 과 같은 형식으로도 명령어를 실행할 수도 있다.

todolist라는 폴더를 만들고, 위의 코드를 적용시켜보자.
todolist의 src폴더에는 확장자로 .tsx가 사용되었음을 확인할 수 있다.

이제 본격적으로, 리액트 폴더의 구조에 대해 알아보자.

리액트 환경 구조

먼저, todolist 폴더의 src > App.tsx 파일과, public > index.html 파일을 확인해보자. App.tsx에는 "App" 이라는 클래스를 가진 function이 하나 있고, index.html의 body부분에는 "root"라는 id를 가진 div 태그가 있다.

// src > App.tsx
function App() {
  return (
    <div className="App">
    ...
    </div>
  )
}

React에서 태그의 class 이름을 지정할 때, className을 사용하는 것을 주의하자.

<!-- public > index.html --->
...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

그 다음, npm start를 실행했을 때 나오는 웹페이지에서, 개발자도구(크롬 기준 f12) > 요소 탭의 코드를 확인해보자.

위 사진을 보면, index.html 과 App.tsx 는 분리되어 있음에도, 하나의 html처럼 작성된 것을 확인할 수 있다.

즉, div 태그의 id인 root를 통해 접근을 하고 있는 것이다. 이것에 대한 내용은 src > index.tsx 파일에서 확인할 수 있다.

// src > index.tsx
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이 코드를 통해 App이라는 컴포넌트를 호출하는 것이다.

먼저 이렇게 간단하게나마 리액트의 구조에 대해서 살펴보았는데, 리액트를 사용하기 위해서는 JSX라는 JavaScript + HTML 형식의 언어를 사용해야 한다. 이 JSX에 대해 알아보자.

JSX 알아보기

먼저, 왜 JSX를 사용해야 하는지에 대해서 이해해보자.
React 라이브러리를 사용해서 JS로 구현한 코드와, JSX를 사용해서 구현한 코드를 비교해보자.

// JS > React 라이브러리 사용
function App(){
  return React.createElement("div",null,"text");
}
// JSX 사용
function App(){
  return  (
    <div>text</div> 
    );
}

위 코드를 살펴보면, 리액트에서 JSX를 사용하는 편이 가독성도 좋고, 편리하다는 것을 알 수 있다.

그럼 이제 본격적으로 JSX의 문법에 대해 알아보자.

JSX 규칙

  1. 태그들은 최상위 부모 요소 1개로 감싸져야한다.
function App() {
  return (
    <div className="App">
      <h1>Title</h1>
      <p>hello.</p>
    </div>
  );
} // OK
function App() {
  return (
    <div>
      title0
    </div>
    <div className="App">
      <h1>Title</h1>
      <p>hello.</p>
    </div>
  );
} // Error - 부모 요소인 <div>이 병렬로 2개 사용됨.

  1. class 선택자를 사용하려면, className 키워드를 사용한다.

  2. JSX는 JS 코드가 사용 가능하며, 변수를 이용하려면 중괄호({ })를 이용한다.

function App() {
  let myText = "text" ; 

  return (
    <div  >
      <h1>Title</h1>
      <p>{myText}</p> // 중괄호 이용
    </div>
  );
}
  1. 3번의 중괄호 안에서는 변수 뿐만 아니라 조건문 등도 사용 가능하다. (단, if문 x, 삼항 연산자 사용)
function App() {
  let myText = "text";

  return (
    <div>
      <h1>Title</h1>
      <p>{myText === "text" ? <h1>"O"</h1> : <h1>"X"</h1>}</p> // "X" 가 필요없다면, `null` 사용
    </div>
  );
}
  1. 4번의 응용으로, 변수에 값이 없을때(undefined), 기본값을 다음과 같이 처리할 수 있다.
function App() {
  let myText = undefined;

  return (
    <div>
      {myText || "텍스트가 입력되지 않았습니다."}
    </div>
  );
}
  1. <br> 태그처럼, HTML에서 닫는 태그가 필요없는 태그들도, JSX에서는 닫는 태그들이 필요하다.
<br></br> 

<br/> // 셀프 클로징 방법. <br></br>과 똑같음.
  1. 주석을 작성할 때는 중괄호({/* */})를 이용한다. (vscode의 ctrl + /를 사용해도 된다.)
function App() {

  return (
    <div> {/* 주석입니다. */}
      text
    </div>
  );
}

css styling

JSX에서도, 기존 css와 마찬가지로 여러개의 스타일 방식을 정할 수 있다.

  1. inline css :
    JSX에서 DOM 요소에 스타일을 적용할 때, 객체 형태로 넣어야한다.
function App() {
  const style = {
    backgroundColor : 'black' , // camelCase로 작성해야함. `-` 가 들어가지 않음.
    color : 'white',
    fontSize : '20px',
    fontWeight : 'bold',
    padding : '20px'
  }

  return (
    <div style = {style}> { /* 중괄호 이용 */}
      text
    </div>
  );
}
  1. internal css : 잘 사용하지 않는다.
  1. external css : 외부 파일(.css)에 css를 작성하고, 클래스이름과 id 이름을 이용해서 css를 적용한다.
import './App.css' ; // 외부 파일 불러오기

function App() {
  return (
    <div className = "container"> 
      text
    </div>
  );
}
  1. .module.css : css 파일을 모듈처럼 불러와서 사용한다. 이때, class이름의 지정과 style적용이 동시에 일어난다.
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.container}>
      text
    </div>
  );
}
profile
JSLEE
공부한 내용들을 정리하기 위해 사용하는 블로그입니다.
이전 포스트

37. TypeScript (2)

다음 포스트

39. React 기초 (2)

0개의 댓글