React) 68번째 회고

---

1. JavaScript Spread Operator

Spread Operator(...)는 ES6에서 도입된 문법으로, 배열이나 객체의 요소를 개별적으로 확장하는 데 사용된다.
React에서 이 연산자는 props 전달, 상태 업데이트, 배열 조작 등에 자주 사용된다.

 

💡 주요 용도

1. 배열 요소 확장
2. 객체 속성 복사
3. 함수 인자 전달

사용 케이스	설명
배열 복사	새 배열 생성 시 기존 배열 요소 포함
객체 병합	여러 객체의 속성을 하나로 결합
props 전달	컴포넌트에 여러 props를 간편하게 전달

 

💻 예시 코드

// 배열 사용 예
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

// 객체 사용 예
const person = { name: 'John', age: 30 };
const updatedPerson = { ...person, age: 31 };

// React 컴포넌트에서의 사용 예
function ParentComponent() {
	const additionalProps = { color: 'red', size: 'large' };
    return <ChildComponent {...additionalProps} />;
}

자바스크립트 ES6 - 스프레드 연산자(spread operator) 이해

- 참고 : mycodings.fly.dev

[JS] 📚 전개 연산자(Spread 문법) 정리

- 참고 : inpa

스프레드 연산자(spread operator)

- 참고 : 순성이의 개발

---

2. render()

render() 메소드는 클래스 컴포넌트에서 UI를 정의하는 핵심 메소드이다.

이 메소드는 컴포넌트의 출력을 반환하며, 매번 state나 props가 변경될 때마다 호출된다.

 

💡 주요 특징

1. JSX 반환
2. 순수 함수여야 함 (side-effect 없어야 함)
3. 조건부 렌더링 가능

 

📌 render() 메소드 내에서 할 수 있는 작업

작업	설명
JSX 반환	화면에 표시될 요소 정의
조건부 렌더링	조건에 따라 다른 JSX 반환
리스트 렌더링	배열 데이ㅓㅌ를 기반으로 요소 생성

 

💻 예시 코드

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

class ConditionalRendering extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    return (
      <div>
        {isLoggedIn ? (
          <h1>Welcome back!</h1>
        ) : (
          <h1>Please sign up.</h1>
        )}
      </div>
    );
  }
}

[React] render() 함수

- 참고 : minjoo-space

---

3. eslint-disable

eslint-disable는 ESLint 규칙을 특정 라인이나 파일에서 비활성화하는 데 사용되는 주석이다.

때로는 ESLint 규칙을 무시해야 할 정당한 이유가 있을 수 있으며, 이때 이 주석을 사용한다.

 

🚀 사용 방법

문법	설명
// eslint-disable-next-line	다음 라인의 모든 규칙 비활성화
// eslint-disable-line	현재 라인의 모든 규칙 비활성화
/* eslint-disable */	파일의 나머지 부분에 대해 모든 규칙 비활성화

 

💻 예시 코드

// eslint-disable-next-line react/no-unescaped-entities
const element = <div>Don't use this too often!</div>;

const value = 'some value'; // eslint-disable-line no-unused-vars

/* eslint-disable react/prop-types */
function Component(props) {
  return <div>{props.value}</div>;
}
/* eslint-enable react/prop-types */

리액트 eslint-disable 적용법

- 참고 : brgndy

---

4. State

State는 React 컴포넌트의 데이터를 저장하고 관리하는 객체이다.

컴포넌트의 동적인 데이터를 다루며, state가 변경되면 컴포넌트가 다시 렌더링 된다.

 

💡 주요 특징

1. 컴포넌트 내부에서 관리
2. 변경 가능 (mutable)
3. setState() 메소드로 업데이트

 

📌 State 관리 방법

방법	설명
클래스 컴포넌트	this.state와 this.setState() 사용
함수형 컴포넌트	useState Hook 사용

 

💻 예시 코드

// 클래스 컴포넌트에서의 state
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// 함수형 컴포넌트에서의 state (hooks)
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

컴포넌트 State – React

- 참고 : ko.legacy.reactjs.org

[리액트] state를 사용하는 이유

- 참고 : biyam.log