[한입 크기로 잘라 먹는 리액트] - React.js 입문 1

 

---

강의 - Section 5 : React.js 입문

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 : 

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

---

 

 

React.js 입문

실습 준비하기

 

1. ESLint 설치

 

 1.1 설치 후 eslint.config.js 파일 rules에 맨 아래 두줄 추가

 

- "no-unused-vars" : " off" => 사용되지 않는 변수에 대해 에러를 출력하지 않도록 함

- "react/prop-types" : "off" => React 컴포넌트에서 prop-types 사용 여부를 검사하지 않도록 설정

 

 

 

 

React.js 입문

React 컴포넌트

 

* 컴포턴트란 ? UI를 구성하는 독립적이고 재사용 가능한 코드 블록이다. 한 번 작성한 뒤 여러곳에서 사용할 수 있으며 이를 통해 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있다.

 

* 컴포넌트의 종류

- 함수형 컴포넌트 : JavaScript 함수처럼 정의하며, React Hooks를 사용하여 생명주기를 다룰 수 있다. 간결하다.

 함수형 컴포넌트를 만들 때 함수 이름의 첫글자는 꼭! 대문자로 작성

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

 

- 클래스형 컴포넌트 : ES6 클래스 문법을 사용, state와 생명주기 메서드를 직접 다룰 수 있다. 점차 덜 사용하는 추세

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

 

* Root 컴포넌트(App.jsx) 

function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

function App() {

  return (
    <>
      <Header/>
      <h1>안녕 리액트</h1>
    </>
  )
}

export default App

 

- Root 컴포넌트란 React 애플리케이션의 진입점이 되는 컴포넌트이다. App 컴포넌트는 보통 React 앱의 가장 상위 컴포넌트로 동작하며, 전체 애플리케이션의 구조를 구성하고 하위 컴포넌트를 포함한다.

(여기 안에서 App은 부모컴포넌트라고 할 수 있으며, Header는 자식 컴포넌트라고 할 수 있다.

   - 부모 컴포넌트 : 다른 컴포넌트를 포함하거나 호출하여 화면에 렌더링 하는 컴포넌트

   - 자식 컴포넌트 : 부모 컴포넌트에서 호출되어 렌더링되는 컴포넌트. 필요하면 부모로부터 데이터를 받을 수 있다.)

 

- 위는 예시를 위한 코드이고, 보통 모듈화를 위해 컴포넌트들을 각각 파일을 나눠서 작성하는게 일반적이다.

 

 

React.js 입문

JSX - UI 표현하기

 

 

* JSX란? React에서 사용하는 JavaScript 문법 확장이다. HTML과 비슷한 문법을 사용하여 UI를 정의할 수 있도록 설꼐되었으며, React 컴포넌트의 구조를 직관적이고 간결하게 표현할 수 있다.

 즉, JavaScript 코드 안에서 HTML처럼 보이는 코드를 작성하게 해준다

 

* JSX의 특징

1. HTML과 문법이 유사하다. 유사한 문법이지만, 브라우저가 실행되기 전에 JavaScript로 변환된다.

// 위의 문법이 아래와 같이 변환된다
const element = <h1>Hello!</h1>;
const element = React.createElement('h1', null, 'Hello, World!');

 

2. JSX안에서 JavaScript 표현식을 { }를 사용해 삽입할 수 있다.

const name = "React";
const element = <h1>Welcome to {name}!</h1>;

 

 

* JSX의 주요 규칙

1. 하나의 부모 요소로 감싸야한다(최상위 태그는 반드시 하나여야 한다)

// 잘못된 코드
return (
  <h1>Header</h1>
  <p>Paragraph</p>
);

// 올바른 코드
return (
  <div>
    <h1>Header</h1>
    <p>Paragraph</p>
  </div>
);

 

 

2. class 대신 className 사용

<div className="container">Hello, JSX!</div>

 

3. self-closing 태그 (내용이 없는 태그는 반드시 self-closing으로 작성해야 한다)

<img src="image.jpg" alt="Example" />

 

4. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다(숫자, 문자열, 배열 값만 렌더링 된다)

const items = [1, 2, 3];
return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;