[React] 기초

 

1. JSX란

JSX 가 무엇이냐? 하면 JavaScript 확장 문법으로 React “엘리먼트(element)” 를 생성함.

const element = <h1>Hello, world!</h1>;

 

HTML과 유사한 구문을 JavaScript에서 사용하여 UI를 작성함.

 

React에서는 본질적으로 렌더링 로직이 UI로직과 연결됨. > 

react는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하나 둘다 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 Separation of concerns함.

const name = 'Josh Perez'; // name을 josh perez로 선언.
const element = <h1>Hello, {name}</h1>; // 그후 element 에 name을 넣을 수 있음.

이거를 타입 스크립트로 변환하면

const name:string = "Josh Perez";
const element:JSXelement = <h1>Hello, {name}</h1>

이런식으로 할 수 있음.

 

---

3. 엘리멘트 렌더링

브라우저 Dom element는 우리가 웹페이지를 보는 HTML 요소임. <div><h1><button> 같은 태그들을 말함.

React Dom Element는 react에서 UI 구성할때 'React Element'라는 객체로 다룸.

화면에 직접적으로 보이지 않으며, 실제 DOM을 나타내는 객체가 아님. 그냥 자바스크립트 객체일 뿐임.

React의 Element는 일반객체(plain object)임. 단순한 자바스크립트 객체로 화면에 표시되기 전에 React가 그 정보를 바탕으로 실제 DOM을 업데이트함. React 엘리먼트는 그 자체로 화면에 표시되지 않지만, React가 이를 사용해서 실제 DOM을 갱신하도록 함.

React 에서는 UI가 애플리케이션의 상태 State와 동작 Logic에 따라 동적으로 업데이트 됨.

+) JS에서도 동적이라는 표현을 쓸때 있는데, JS에서의 동적은 변수의 값에 따라 타입이 자동으로 결정된다는 부분에서 '동적'이 나온것이고. React의 경우에는 State나 Props 이 변경되면 React가 Dom을 직접 수정하지 않아도 UI를 렌더링 한다는 의미에서 '동적'이라는 것임.

그리하여 React element를 렌더링하기 위해서는 Dom Element를 ReactDOM.createRoot() 에 전달한 다음, React Element를 root.render()에 전달해야함.  / 렌더링: 코드로 작성한 내용을 UI로 변환하는 과정임.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

 

---

4. Component 와 Props, State

컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것. 첫번째는 JS, 두번째는 typescript임.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function Welcome(props: { name: string }) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 react element를 반화하므로 유효한 React component임. 컴포넌트는 JS함수이기 때문에 함수 컴포넌트라고 호칭함.

React 에서는 Component와 Props, State는 핵심 개념임.

 

1) Component

- 독립적이고 재사용 가능한 UI 구성요소를 뜻함.

- UI의 일부를 정의하는 함수나 클래스임. 화면에 표시할 내용을 반환하는 역할을 함.

① 함수형 컴포넌트 (Functional Component)

import React from 'react';

// props 타입 정의
interface GreetingProps {
  name: string;
}

// 함수형 컴포넌트에서 props 사용
const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

const Parent: React.FC = () => {
  return <Greeting name="John" />;  // 부모 컴포넌트에서 name props 전달
};

export default Parent;

 

② 클래스형 컴포넌트 (Class Component)

import React, { Component } from 'react';

// props 타입 정의
interface GreetingProps {
  name: string;
}

// 클래스형 컴포넌트에서 props와 state 사용
class Greeting extends Component<GreetingProps> {
  render() {
    const { name } = this.props;  // props에서 name을 가져옴
    return <h1>Hello, {name}!</h1>;
  };
}

export default Greeting;

** JS가 아닌 Typescript 를 사용하는 것이기 때문에  props와 state의 타입을 명시적으로 선언해야함.

현재는 JS도 쓰이지만 Typescript의 사용이 높기 때문에 계속해서 Typescript를 공부할 거임.

// javasript
const [count, setCount] = useState(0); // 이렇게 해도 count 가 숫자인 걸 런타임때 알음.

// typescript
const [count,setCount] = useStete(Number:0);

Number을 꼭 붙여줘야한다는 말임.

 

그리고 JavaScript 에서는 Props의 타입을 정의하지 않아도 되지만 Typescript에서는 Props의 타입를 선언해줘야함.

 

2) Props(프로퍼티) 

- 컴포넌트 간 데이터 전달을 위한 방법.

- 부모 컴포넌트에서 자식 컴포넌트로 읽기 전용 데이터를 전달하는 방식

- props 는 변경할 수 없음. 컴포넌트에 데이터를 전달하는 유일한 방법임.

- 읽기 전용임. 자식 컴포넌트에서는 props의 값 변경 안됨

import React from 'react';

// props 타입 정의
interface GreetingProps {
  name: string;
  age: number;
}

// props를 받는 컴포넌트
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return <h1>Hello, {name}, you are {age} years old!</h1>;
};

const Parent: React.FC = () => {
  return <Greeting name="Alice" age={30} />;  // 부모에서 name, age props 전달
};

export default Parent;

 

3) State

- TypeScript에서 useState를 사용할 때는 타입을 명시적으로 지정할 수 있음.

- State는 컴포넌트 내부에서 동적으로 변하는 데이터를 관리하는 방법.

- State는 사용자가 상호작용하는 동안 데이터가 변할 수 있으며, 변경될 때마다 컴포넌트를 리렌더링하여 최신 UI를 반영함.

- 상태 값은 변경 가능하며, 변경하면 자동으로 리렌더링이 발생하여 UI에 반영됨.

- 함수형 컴포넌트에서는 useSate 훅을 사용하여 상태를 관리하고, 클래스형 컴포넌트에서는 this.state 와 this.setState를 사용함.

Component	UI를 구성하는 재사용 가능한 단위 함수형 컴포넌트와 클래스형 컴포넌트 있음
Props	읽기전용 데이터를 전달하는 방법 자식 컴포넌트는 props 값 변경 불가
State	컴포넌트 내부에서 동적으로 변하는 데이터 관리하는 방법 상태가 변경되면 React는 해당컴포넌트를 리렌더링하여 최신 UI 표시