[React]컴포넌트,props,불변성

리액트에서 컴포넌트는 중요한 개념🌟

개념적으로 컴포넌트는 javascript 함수와 유사!

 

props라는 input을 받아서 react 앨리먼트라는 output을 반환

 

🔸리액트 컴포넌트 표현방법

1. 함수형 컨포넌트(권장)

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼트를 return!

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

// 위와 같음
function App () {
	return <div>hello</div>
}

2. 클래스형 컴포넌트(구식)

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

컴포넌트 네이밍📛

• 대문자로 시작
• 카멜케이스로 네이밍

JSX

• javascript안에 html 태그같은 마크업을 넣음!

---

🔸props

• 컴포넌트간의 정보 교류 방법!
• 부모=> 자식만 가능, 패륜안돼(코딩애플식) 
• 반드시 읽기 전용으로만!👀 (변경❌)
• 🚫 prop drilling 주의(부모의 데이터를 계속 자식의자식의자식...등으로 전달)

function App() {
  const userName = "John";

  return (
    <Parent userName={userName} />
  );
}

function Parent({ userName }) {
  return (
    <Child userName={userName} />
  );
}

function Child({ userName }) { //props를 전달만 함
  return (
    <GrandChild userName={userName} />
  );
}

function GrandChild({ userName }) {
  return <p>Hello, {userName}!</p>;
}

children

• 컴포넌트 안에 들어가는 다른 컴포넌트나 요소를 나타내는 특별한 props
  => 어떤 컴포넌트의 내부에 위치한 내용

import React from "react";

function User(props) {
  return <div>{props.children}</div>; // 안녕하세요
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

---

🔸state

• 컴포넌트 내부에서 바뀔수 있는 값
  => UI의 반영을 위해!

useState

• state를 만드는 함수(= 리액트 훅🪝)

const [ value, setValue ] = useState( 초기값 ); // by 배열의 구조분해할당

• setValue(바뀌고 싶은 값)

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

  console.log(value) // input 입력할때마다 콘솔로그에 찍힘

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

• [공식문서]

useState – React

---

🌟리액트에서는 불변성을 유지해야함 🌟

1. 리액트의 효율적인 렌더링

• 리액트는 컴포넌트가 변경된 부분만 다시 렌더링해 성능을 최적화함
• 이때 상태가 불변하면 리액트는 새로운 상태와 이전 상태를 비교할 때 단순히 참조만 확인해서 업데이트가 필요한지 쉽게 알 수 있음
• ∴ 즉, 불변성을 유지하면 리액트가 더 빨리, 효율적으로 업데이트를 할 수 있음

2. 예상 가능한 상태 관리

• 불변성을 유지하면 상태가 직접 변경되지 않고 항상 새로운 값으로 교체되므로, 상태가 어떻게 변화하는지 예측하기 쉬움
• 코드에서 상태 변경이 일어날 때 이전 상태가 유지되면, 디버깅이 용이해져 코드의 신뢰성이 높아짐

🚫만약 불변성을 유지하지 않으면🤔

리액트가 상태 변화를 감지하지 못해 컴포넌트가 업데이트되지 않는 문제가 발생할 수 있음!

 

 

∴  spread 연산자나 Object.assign 등을 사용해 새로운 객체나 배열을 만들어 상태를 업데이트하기!🌟