[2024 여름방학 React.js study] 이가인 #3주차

DOM이란?, React 라이브러리의 등장

DOM(Document Object Model)은 HTML, XML 문서의 구조화된 표현을 의미하며, 프로그래밍 언어가 이 구조에 접근하고 조작할 수 있는 방법을 제공하는 모델이다.

문서의 구조 표현: 웹 페이지의 HTML 구조를 트리(tree) 형태로 표현합니다. 트리의 각 노드(node)는 HTML 태그 하나하나를 나타
프로그래밍 인터페이스: 이 구조에 접근하고 수정할 수 있는 방법을 제공하여, 자바스크립트 같은 언어를 통해 웹 페이지의 내용을 변경하거나, 요소를 추가/삭제할 수 있다.

// html 문서
<html>
  <body>
    <h1>안녕하세요</h1>
    <p>이것은 예시 문서입니다.</p>
  </body>
</html> 

// dom 트리
Document
├── html
    ├── body
        ├── h1
        │   └── "안녕하세요"
        └── p
            └── "이것은 예시 문서입니다."

DOM 이 다양해지고, 처리해야 할 이벤트들이 다양해진다면 이에 따라 업데이트를 하는 규칙과 코드들이 많이 복잡해진다.

하지만, 리액트에서는 Virtual DOM 이라는 것을 사용해 이를 간소화했다.

Virtual DOM 은 가상의 DOM이며 , 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠르다.

- 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜 줌

리액트 컴포넌트 만들기

-함수, 클래스 형태로 작성 가능

- xml형식의 값 반환 : jsx

- 컴포넌트는 일종의 UI 조각이며, 쉽게 재사용할 수 있음!

import React from 'react'; // 리액트 불러오기

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

export default Hello; // Hello라는 컴포넌트를 내보겠다

JSX란?

리액트 컴포넌트에서 xml 형식의 값을 반환하는 것

JSX 가 JavaScript 로 제대로 변환이 되려면 지켜주어야 필수적인 규칙들

1. 태그는 꼭 닫혀있어야 함.

태그를 열었으면 꼭, <div></div> 이렇게 닫아주어야 한다.

태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing 태그 라는 것을 사용해야 함.

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

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

export default App;

2. 꼭 감싸져야하는 태그

3. JSX 안에 자바스크립트 값 사용하기

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줘야 함.

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

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

4. style과 className

html에서와 다르다. 객체 형태로 작성을 해야함!

CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야

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

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

5. 주석

- JSX 내부의 주석은 {/* 이런 형태로 */} 작성한다.

중괄호로 감싸지 않으면 화면에 보인다. !

- 열리는 태그 내부에서는 // 이런 형태로도 주석 작성이 가능

props

우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용함.

-app에서 hello를 사용할 때 name이라는 값 전달

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

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

-hello에서 name값 사용하고싶을 때

import React from 'react';

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

export default Hello;

defaultProps 로 기본값 설정

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정

import React from 'react';

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

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

useState

컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에서는 useSTate의 함수를 사용해 컴포넌트에서 상태를 관리함.

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줌. -> 함수를 호출할 경우 배열이 반환된다.

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

import React, { useState } from 'react'; //리액트에서 useState라는 함수 불러와줌.

input 관리

input 의 상태를 관리할 때에는 input 태그의 value 값도 설정해주는 것이 중요하며, 그렇게 해야, 상태가 바뀌었을때 input 의 내용도 업데이트가 됨.

여러개를 관리하려면 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수 있지만, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조해야 편함. 그리고, useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.

inputs[name] = value; //리액트상태에서는 이런식으로 객체를 수정하면 안됨

setInputs({
  ...inputs,
  [name]: value
}); //새로운 객체를 만들어 새로운 객체에 변화를 주고 이를 상태로 사용해 주어야함.

저작자표시 동일조건

'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글

[2024 여름방학 React.js 스터디] 김태일 #4주차 "리액트 입문(2)" (1)	2024.08.02
[2024 여름방학 React.js 스터디] 김민서 #4주차 (0)	2024.08.02
[2024 여름방학 React.js study] 이가인 #2주차 (0)	2024.07.26
[2024 여름방학 React.js 스터디] 이종윤 #3주차 (0)	2024.07.26
[2024 여름방학 React.js 스터디] 이정욱 #3주차 리액트 다시 re act 해보자 (0)	2024.07.26

KMU_SW_CLUB

[2024 여름방학 React.js study] 이가인 #3주차

JSX란?

props

'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글

티스토리툴바

[2024 여름방학 React.js study] 이가인 #3주차

JSX란?

props

'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글

'WINK-(Web & App)/React.js 스터디' Related Articles

티스토리툴바