22.12.07 - React

리액트

• React 는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
  • 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
  • react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용된다

Component

• Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.
  즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다.
• 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
• 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.

Props

• Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터이다.
• 쉽게 읽기 전용 데이터라고 생각하면 될 것 같다.
• 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

useState

• useState는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
• useState는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
• 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 useState는 독립적이다.

useEffect

• useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수이다.
• useEffect는 콜백 함수를 부르게 되며 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.
• 실행 조건
  • 페이지가 처음 렌더링 되고 난 후 무조건 한 번 실행된다.
  • useEffect에 배열로 지정한 useState의 값이 변경되면 실행된다.
• 실행 방법
  • 1. 어느 값이든 변할 때 마다 실행된다.
  • 2. 무조건 단 한번 실행된다. 그 후 실행되지 않는다.
  • 3. 지정된 변수 혹은 오브젝트가 변할때만 실행된다.

// 1. Dependency가 없는 방법
useEffect(() => {});

// 2. 대괄호를 이용하는 방법
useEffect(() => {}, []);

// 3. 대괄호 안에 특정 변수를 지정하는 방법
useEffect(() => {}, [특정변수 혹은 오브젝트]);