[React] Es6+ ,Props

리액트 복습 및 정리하기

• 리액트 정리1탄 (ES6, Props)
• 리액트 정리2탄 (Hooks)

react 이해

자바스크립트 라이브러리로 구조가 MVC, MVW와 달리 오직 V(view)만 신경 쓴다.

특징

Viertual DOM

DOM은 Document Object Model의 약어로, 객체로 XML 또는 HTML로 작성된다. . Virtual DOM은 메모리 내에서 가상의 DOM을 만들어서, 실제 DOM과의 차이점을 비교하고 한 번에 최소한의 변경만 실제 DOM에 적용한다.

컴포넌트 기반 구조

React의 또 다른 핵심 개념은 컴포넌트이며, 컴포넌트는 UI를 구성하는 독립적인, 재사용 가능한 코드 블록이다.

단방향 데이터 흐름

React는 단방향 데이터 흐름을 지향합니다. 이는 데이터가 부모 컴포넌트에서 자식 컴포넌트로만 흐르는 것을 의미합니다. 이렇게 하면 데이터의 흐름을 추적하고 디버깅하는 것이 더 쉬워진다.

JSX

React에서는 JSX라는 문법을 사용한다. JSX는 JavaScript XML의 약어로, 자바스크립트 코드 안에서 HTML 같은 문법을 사용할 수 있게 해주고. 이로 인해 UI를 정의하는 코드가 더 직관적이고 읽기 쉬워진다.

</hr>

ES6의 const와 let

ES6에서는 새로운 변수 선언 키워드인 const와 let을 도입했다. const와 let은 기존의 var 키워드와는 다른 특성을 가지고 있다.

const

• 상수 선언: const는 상수를 선언할 때 사용한다. 즉, 한 번 값을 할당하면 나중에 값을 변경할 수 없다.
• 블록 스코프: const로 선언된 변수는 블록 스코프를 가진다. 이는 변수가 선언된 블록 내에서만 접근할 수 있다는 의미이다.
• 재할당 불가: const로 선언된 변수는 재할당이 불가능하다. 그러나 객체의 속성은 변경할 수 있다.

예제:

javascript

const name = "John";
name = "Doe"; // 오류 발생: const 변수는 재할당할 수 없다.

const person = { age: 30 };
person.age = 31; // 가능: 객체의 속성은 변경할 수 있다.

let

• 변수 선언: let은 변수 선언에 사용된다. 이는 값을 나중에 변경할 수 있는 변수를 선언할 때 사용한다.
• 블록 스코프: let으로 선언된 변수는 블록 스코프를 가진다. 이는 변수가 선언된 블록 내에서만 접근할 수 있다는 의미이다.
• 재할당 가능: let으로 선언된 변수는 재할당이 가능하다.

예제:

javascript

let age = 25;
age = 26; // 가능: let 변수는 재할당할 수 있다.

if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // 오류 발생: x는 블록 스코프 내에서만 접근 가능하다.

const와 let의 차이점 표

특성	const	let
선언 후 재할당	불가능	가능
스코프	블록 스코프	블록 스코프
초기화	선언 시 반드시 초기화해야 함	선언 시 초기화 필요 없음
변경 가능성	객체의 속성은 변경 가능하지만, 변수 자체는 변경 불가	변수 자체를 포함하여 모든 값 변경 가능

const와 let의 도입으로 자바스크립트의 변수 선언 방식이 더욱 명확하고 예측 가능해졌다. const는 상수 선언에, let은 변경 가능한 변수 선언에 사용하여 코드를 보다 읽기 쉽고 유지보수하기 쉽게 만들어 준다.

</hr>

Es6 클래스문법

클래스 선언 방식

javascript

class Person {
  // 생성자 함수
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 메서드 정의
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('John', 30);
person1.greet(); // 출력: Hello, my name is John and I am 30 years old.

클래스 표현식

javascript

const Person = class {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const person2 = new Person('Jane', 25);
person2.greet(); // 출력: Hello, my name is Jane and I am 25 years old.

상속

클래스 상속

ES6 클래스는 extends 키워드를 사용하여 다른 클래스를 상속받을 수 있다. super 키워드를 사용하여 부모 클래스의 생성자와 메서드를 호출할 수 있다.

javascript

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 생성자를 호출
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog1 = new Dog('Buddy', 'Golden Retriever');
dog1.speak(); // 출력: Buddy barks.

정적 메서드

정적 메서드

정적 메서드는 인스턴스가 아닌 클래스 자체에서 호출할 수 있는 메서드이다. static 키워드를 사용하여 정의한다.

javascript

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtil.add(5, 3)); // 출력: 8

게터와 세터

게터와 세터

게터와 세터는 객체의 속성을 읽거나 설정할 때 사용되는 접근자 프로퍼티이다. get과 set 키워드를 사용하여 정의한다.

javascript

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height;
  }

  set width(value) {
    if (value <= 0) {
      throw new Error('Width must be positive.');
    }
    this._width = value;
  }

  get width() {
    return this._width;
  }
}

const rect = new Rectangle(10, 20);
console.log(rect.area); // 출력: 200
rect.width = 15;
console.log(rect.area); // 출력: 300

ES6 클래스 문법을 통해 객체 지향 프로그래밍을 더 쉽게 구현할 수 있게 되었고, 코드의 가독성과 유지보수성이 향상되었다

태그 사이의 내용을 보여주는 children과 비구조화 할당

React에서 컴포넌트의 재사용성을 높이기 위해 부모 컴포넌트와 자식 컴포넌트 사이에서 태그 사이의 내용을 전달하고 싶을 때 children을 사용한다. children은 부모 컴포넌트가 자식 컴포넌트에 전달하는 props 중 하나로, 자식 컴포넌트가 부모 컴포넌트의 태그 사이에 위치한 요소들을 접근할 수 있게 해준다.

기본적인 사용법

javascript

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <ChildComponent>
      <p>This is some content passed as children.</p>
    </ChildComponent>
  );
}

export default ParentComponent;
javascript

// 자식 컴포넌트
import React from 'react';

function ChildComponent({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

export default ChildComponent;

위의 예제에서 ParentComponent는 ChildComponent를 렌더링하면서 <p> 태그의 내용을 children으로 전달한다. ChildComponent는 children props를 통해 그 내용을 렌더링한다.

비구조화 할당

비구조화 할당(destructuring assignment)은 객체나 배열의 속성을 변수로 쉽게 분리해내는 JavaScript 문법이다. React에서 props를 받을 때 이 문법을 자주 사용한다.

javascript

// 비구조화 할당을 사용하지 않은 예제
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

위의 코드를 비구조화 할당을 사용하여 더 간단하게 작성할 수 있다.

javascript

// 비구조화 할당을 사용한 예제
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

비구조화 할당은 children과 함께 사용될 때 유용하다.

javascript

// 자식 컴포넌트에서 비구조화 할당과 children을 함께 사용
import React from 'react';

function ChildComponent({ children, title }) {
  return (
    <div>
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}

export default ChildComponent;
javascript

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <ChildComponent title="Greetings">
      <p>This is some content passed as children.</p>
    </ChildComponent>
  );
}

export default ParentComponent;

위의 예제에서 ChildComponent는 children과 title을 비구조화 할당을 통해 받아 사용한다. ParentComponent는 title과 태그 사이의 내용을 ChildComponent에 전달하여 사용하게 된다.

요약

• children은 부모 컴포넌트가 자식 컴포넌트에 태그 사이의 내용을 전달하는 방법이다.
• 비구조화 할당은 객체나 배열의 속성을 변수로 쉽게 분리해내는 JavaScript 문법이다.
• React에서 props를 받을 때 비구조화 할당을 자주 사용하며, children과 함께 사용할 때 유용하다.