[앱개발교육] React 개요 및 chatGPT에서 알게 된 것

React 컴포넌트는 함수형 컴포넌트(Functional Components)와 클래스형 컴포넌트(Class Components), 두 가지 주요 형태가 있다. 최근 React 버전에서는 함수형 컴포넌트와 훅(Hook)을 사용하는 것이 일반적이라 한다. 

 

훅(Hook) .. 코드에서 사용했던 훅의 종류

- useState() ex. const  [count, setCount] = useState(0); 상태 관리, 초기값 설정, 상태 변수와 그 상태를 업데이트하는 함수

- useQuery() ;데이터를 가져오고 관리, React Query에서는 쿼리 결과를 자동으로 캐시, 캐시된 데이터가 필요할 때는 useQuery의 data 속성을 통해 접근 할 수 있다. 

- useNavigation()

-----

- useEffect(); 부수 효과(주로 데이터 가져오기, 구독 설정, 수동으로 DOM 수정하기...) 수행하기 위해

아래의 코드는 useEffect()는 컴포넌트가 렌더링될 때와 count 상태가 변경될 때마다 실행된다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('컴포넌트가 렌더링됨');
  }, [count]); // count 상태가 변경될 때만 useEffect 실행, [/*의존성 배열*/] 실행조건 지정

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

export default MyComponent;

 

함수형 컴포넌트는 단방향 데이터 흐름 -- 데이터의 흐름이 상위 컴포넌트에서 하위 컴포넌트로 향하는 방향즉, 데이터를 다시 하위에서 상위로 올라가는 일이 없다는 뜻 + function 선언, 훅을 사용해 상태 관리

 

클래스형 컴포넌트는 state와 props를 통해 상태관리를 한다. 클래스형 컴포넌트에서는 컴포넌트의 상태를 state객체로 관리하고 부모 컴포넌트로부터 전달되는 데이터를 props를 통해 받는다. + class 선언 render() 함수를 필수적으로 사용, Component 상속 

// ParentComponent.js
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) { // constructor 메서드에서 state의 초기값을 설정해 주어야 한다. 
    super(props); // 반드시 호출
    this.state = {
      parentData: 'Hello from Parent!',
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.parentData}</h1>
        <ChildComponent dataFromParent={this.state.parentData} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js
import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <p>Data from Parent: {this.props.dataFromParent}</p>
      </div>
    );
  }
}

export default ChildComponent;

* https://devowen.com/298 참고

* https://born-dev.tistory.com/27 참고

함수형 컴포넌트를 선언할 때 사용하는 방법으로 일반적인 함수 선언 방식과 ES6(js)의 화살표 함수 방식이 있다. 

일반함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수 '() => {}'는 자신이 종속된 인스턴스를 가리킨다. 

(js가 거의 처음이라 화살표 함수 나올 때마다 당황한다.. 여기서 이 의미 처음 알았다;)

** https://ko.javascript.info/arrow-functions-basics  봐야지 봐야지... 

// 기존 함수 표현식
function add(a, b) {
  return a + b;
}

// 화살표 함수로 변환
const addArrow = (a, b) => a + b;

console.log(add(2, 3));       // 출력: 5
console.log(addArrow(2, 3));  // 출력: 5

 

props는 프로퍼티(properties)의 줄임말이고 컴포넌트의 속성을 설정할 때 사용한다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 

• flex={1} (flex: 1); 크기에 대한 비율, 부모 크기 따라서 다 채워주기(= 화면 전체로 확장)
• p(padding), m(margin) 차이; 부모로부터 얼마나 떨어져 있을지, 부모가 자식 콘트롤/ 한번에 여백 설정 - p
• position='absolute'; 부모 컴포넌트와 독립적으로 움직일 수 있음, 원하는 위치에 자유롭게 위치할 수 있음, 상위 요소 중 postion 속성이 'relative'인 것이 없다면 전체 화면이 배치 기준으로 설정됨.
• width='100%' == (left=0 && right=0) -- css에서는 그랬는데 똑같겠지..

 

useQuery 사용 시 함께 작성하는 것

- QueryClient 인스턴스 생성

- QueryClientProvider; QueryClient의 인스턴스를 제공하는 위한 컨텍스트 생성, App 컴포넌트의 바깥쪽에 배치

import { QueryClient, QueryClientProvider } from 'react-query';

// QueryClient 인스턴스 생성
const queryClient = new QueryClient();

function App() {
  return (
    // QueryClientProvider를 사용하여 QueryClient 제공
    <QueryClientProvider client={queryClient}>
      {/* 애플리케이션의 나머지 부분 */}
    </QueryClientProvider>
  );
}

- fetch() 함수; 네트워크 요청을 만들고 해당 요청에 대한 응답(response)을 Promise 타입의 객체로 반환

대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, 응답(response) 객체는 json()를 제공한다고 한다.

( https://www.daleseo.com/js-window-fetch/ 참고)

Promise는 비동기 작업을 처리하는 객체이고 '.then()' 또는 'async/await'와 함께 사용된다.

(비동기 작업은 일반적으로 서버에서 데이터를 가져오거나 파일을 읽는 등의 작업을 의미한다.)

( https://ko.javascript.info/async-await, https://gruuuuu.github.io/javascript/asyncawait/ 참고)

•  .then 메서드는 프라미스의 사앹가 변할 때 실행할 콜백 함수들을 등록한다. 
• async; function 키워드 앞에 위치, async function은 항상 프라미스 반환, 비동기 작업의 결과를 기다리는 동안 코드 실행 일시 중지
• await; async 함수 안에서만 동작, 프라미스가 처리될 때까지 (반환되는 데이터를) 비동기적으로 기다린다, 기다리는 동안 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있어서 CPU 리소스 낭비가 적다. 

js 문법에서 '||' 의미

{ data || [] } 는 data가 존재하지 않을 때 빈 배열을 출력한다.

첫 번째 피연산자가 참이면 두 번째 피연산자의 값은 고려하지 않고 바로 첫 번째 피연산자의 값 반환한다.

만약 첫 번째 피연산자가 거짓이면, 두 번째 피연산자의 값이 반환된다. 

const a = 5;
const b = 10;

const result = a || b;

console.log(result); // 5

cf. const, let, var 변수 선언 키워드

- const : 재할당 불가, 선언과 동시에 값 할당, 블록 스코프

- let: 재할당 가능, 블록 스코프

- var: 재할당 가능, 함수 스코프 -- let보다는 사용 지양