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

 

---

강의 - Section 5 : React.js 입문

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

인프런 : 

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

---

 

 

 

React.js 입문

Props - 컴포넌트에 값 전달하기

 

 

* Props란? React 컴포넌트에서 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터이다. 읽기 전용이며 자식 컴포넌트에서 수정할 수 없다.

 

 

* Props 사용 예제

1. 부모 컴포넌트에서 Props 전달(JSX를 사용해 컴포넌트에 속성 형태로 데이터를 전달)

function App() {
  return (
    <>
      <Button text = {"메일"}/>
      <Button text = {"카페"}/>
      <Button text = {"블로그"}/>
    </>
  )
}

 

2. 자식 컴포넌트에서 Props 받기(전달된 Props는 자식 컴포넌트에서 함수의 매개변수로 접근)

const Button = (props) => {
    return (
        <button>{props.text}</button>
    )
};

 

 

* Props의 활용 예제

1. 기본값 설정(defaultProps - Props가 전달되지 않았을 때 기본값 설정)

// 부모 컴포넌트
function App() {
  return (
    <>
      <Button text = {"메일"} color = {"red"} />
      <Button text = {"카페"}/>
      <Button text = {"블로그"}/>
    </>
  )
}

// 자식 컴포넌트
const Button = (props) => {
    return (
        <button style = { {color : props.color }}>
            {props.text}
        </button>
    )
};

Button.defaultProps = {
    color : "black"
}

export default Button;

 

 

2. 다양한 데이터 전달(숫자, 문자열, 배열, 객체 등 다양한 데이터 타입 전달)

function Profile({ name, age, hobbies }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <ul>
        {hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return <Profile name="Alice" age={25} hobbies={['Reading', 'Traveling']} />;
}

 

 

3. 부모 컴포넌트에서 children 전달(<컴포넌트>내용</컴포넌트> 형태로 작성하면 그 내용이 props.children으로 전달됨)

function Wrapper(props) {
  return <div className="wrapper">{props.children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>Hello, World!</h1>
      <p>This is a child element.</p>
    </Wrapper>
  );
}

 

 

React.js 입문

이벤트 핸들링

 

 

* 이벤트 핸들링 이란? 사용자가 버튼을 클릭하거나, 입력을 하거나, 마우스 움직임 등과 같은 동작을 수행했을 때 실행되는 함수를 처리하는 방법이다. 리액트는 HTML의 기본 DOM 이벤트와 유사하지만 몇가지 차이가 있다.

(여기서 이벤트란, 웹 내부에서 발생하는 사용자의 모든 행동이라고 할 수 있다)

 

 

* 리액트 이벤트 핸들링 특징

1. 카멜 케이스 사용

 : 리액트의 이벤트 속성의 이름은 소문자 대신 onClick, onChange처럼 카멜 케이스를 사용함

 

2. SyntheticEvent(합성 이벤트) 사용

 : 리액트는 모든 이벤트를 SyntheticEvent라는 래퍼 객체로 처리하며, 이는 브라우저 간의 호환성을 제공한다

  (합성 이벤트란 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태이다)

 

 

React.js 입문

State로 상태 관리하기

 

 

* state란? 컴포넌트 내부에서 관리되는 동적 데이터를 의미하며, 컴포넌트의 상태를 나타내고 변경될 수 있다.

 

 

* state 특징

1. 컴포넌트 내부에서 관리

 : state는 컴포넌트 내부에서 선언되고 관리 됨. 외부에서 직접 변경할 수 없으며, 내부에서만 수정 가능.

 

2. 변경 시 자동 UI 업데이트

 : state가 변경되면 리액트는 컴포넌트를 다시 렌더링화하여 화면을 업데이트 함

 

3. 불변성 유지

 : state를 직접 수정하지 않고, setState(클래스 컴포넌트)나 상태 업데이트 함수(함수 컴포넌트)를 사용해 변경해야 한다.

 

 

* state 사용법

import { useState } from 'react';


function App() {

  const [count, setCount] = useState(0);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => {
        setCount(count + 1);
      }}>+</button>
    </>
  )
}

export default App

 

- useState(초기값) : useState는 상태값을 초기화 하는 함수이며, 반환값은 [상태값, 상태 업데이트 함수]의 배열이다.

- 상태값 : 현재 상태를 나타낸다. 여기서는 count

- 상태 업데이트 함수 : 상태를 변경하는 함수. 여기서는 setCount

 

 

 

React.js 입문

State와 Props

 

* State와 Props로 보는 리렌더링

const Bulb = ({light}) => {
  return (
    <div>
      {light === "ON" ? 
      <h1 style={{backgroundColor : "orange"}}>ON</h1> : <h1 style={{backgroundColor : "gray"}}>OFF</h1>}
    </div>
  )
}

function App() {

  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");

  return (
    <>
    <div>
      <Bulb light={light} />
      <button onClick={() => {
        setLight(light === "ON" ? "OFF" : "ON")
      }}>{light === "ON" ? "끄기" : "켜기"}</button>
    </div>

    <div>
      <h1>{count}</h1>
      <button onClick={() => {
        setCount(count + 1);
      }}>+</button>
    </div>
    </>
  )
}

 

* App 컴포넌트 : 두 개의 state(count와 light)를 관리한다. 이 중 light는 Bulb 컴포넌트에 props로 전달된다.

* Bulb 컴포넌트 : light라는 props를 받아 화면에 ON 또는 OFF 상태를 표시한다.

* 그렇다면 count 변경 시 Blub가 리렌더링 되는가?

  : count만 변경된 경우, Bulb 컴포넌트는 부모로 받은 props가 변경되지 않았기 때문에 리렌더링되지 않는다. 즉, props는 동일한 값(light)을 유지하므로 Bulb는 다시 렌더링 되지 않는다.

 

* 결론! 리렌더링 조건

 - state가 변경되면 컴포넌트는 리렌더링 된다

 - 부모 컴포넌트의 state가 변경되더라도 자식 컴포넌트에 전달된 props가 변하지 않으면 자식은 리렌더링 되지 않는다

 - props가 변경되는 자식 컴포넌트가 리렌더링 된다