kdh22q

AsyncStorage는 React Native 애플리케이션에서 비동기적으로 데이터를 저장하고 관리할 수 있는 API를 제공한다. 

AsyncStorage의 특징

1. 비동기 작업 처리

• 설명: AsyncStorage는 비동기적으로 데이터를 처리한다. 이는 데이터 저장, 읽기, 삭제 작업이 네트워크 요청처럼 시간이 걸릴 수 있음을 의미한다. 모든 작업은 Promise를 반환하며, async/await 구문을 사용하여 비동기 작업을 쉽게 처리할 수 있다.
• 장점: 비동기 처리는 UI의 반응성을 유지하면서 데이터 작업을 수행할 수 있게 해준다.

2. 저장된 데이터의 영속성

• 설명: AsyncStorage는 데이터가 앱을 종료하거나 디바이스가 재부팅되어도 유지되도록 설계되었다. 이는 로컬 디바이스 스토리지에 데이터를 저장하기 때문이다.
• 장점: 앱이 다시 실행될 때에도 저장된 데이터에 접근할 수 있어 사용자 설정, 로그인 정보 등을 유지할 수 있다.

3. 키-값 쌍으로 데이터 저장

• 설명: AsyncStorage는 데이터를 키-값 쌍으로 저장한다. 데이터는 문자열 형태로 저장되며, 복잡한 데이터는 JSON 문자열로 변환하여 저장할 수 있다.
• 장점: 간단한 데이터 저장과 조회를 지원하며, 키를 통해 특정 데이터를 쉽게 식별하고 접근할 수 있다.

4. 데이터의 삭제 및 갱신

• 설명: AsyncStorage는 특정 키에 대한 데이터를 삭제하거나 갱신할 수 있는 메서드를 제공한다. 데이터 삭제는 removeItem, 모든 데이터 삭제는 clear 메서드를 사용하며, 데이터 갱신은 mergeItem 메서드를 통해 수행할 수 있다.
• 장점: 저장된 데이터의 관리와 업데이트를 유연하게 수행할 수 있다.

5. 여러 항목의 한 번에 저장 및 삭제

• 설명: AsyncStorage는 multiSet과 multiRemove 메서드를 통해 여러 항목을 동시에 저장하거나 삭제할 수 있다. 이는 여러 키-값 쌍을 한 번에 처리할 때 유용하다.
• 장점: 배치 작업을 지원하여 데이터 처리 작업을 효율적으로 수행할 수 있다.

6. 키 목록 조회

• 설명: getAllKeys 메서드를 사용하면 저장된 모든 키를 배열로 가져올 수 있다. 이는 현재 저장된 데이터의 키를 확인하거나 특정 데이터를 찾는 데 유용하다.
• 장점: 저장된 데이터의 전체 목록을 조회할 수 있어 데이터 관리가 용이하다.

7. 다중 데이터 읽기 및 저장

• 설명: multiGet 메서드를 사용하여 여러 키의 값을 동시에 읽어올 수 있으며, multiSet 메서드를 사용하여 여러 항목을 동시에 저장할 수 있다. 이는 많은 데이터를 처리할 때 유용하다.
• 장점: 여러 항목을 동시에 처리할 수 있어 성능을 최적화하고 코드의 복잡성을 줄일 수 있다.

8. JSON 데이터의 변환

• 설명: AsyncStorage에 저장할 데이터는 문자열이어야 하므로, 객체를 저장할 때는 JSON.stringify를 사용하여 문자열로 변환해야 한다. 읽어올 때는 JSON.parse를 사용하여 문자열을 다시 객체로 변환할 수 있다.
• 장점: 객체와 같은 복잡한 데이터를 문자열로 변환하여 저장하고, 다시 원래의 형식으로 복원할 수 있어 다양한 데이터 유형을 처리할 수 있다.

9. 오류 처리 및 예외 처리

• 설명: AsyncStorage의 메서드는 비동기적으로 작동하므로, 오류가 발생할 수 있다. try-catch 블록을 사용하여 오류를 처리할 수 있으며, .catch 메서드를 사용하여 Promise에서 발생할 수 있는 오류를 처리할 수 있다.
• 장점: 예외 처리를 통해 애플리케이션의 안정성을 유지하고, 예상치 못한 오류에 대한 적절한 대응을 할 수 있다.

AsyncStorage 주요 기능

await AsyncStorage.setItem('user_token', 'abc123');

const token = await AsyncStorage.getItem('user_token');

await AsyncStorage.removeItem('user_token');

await AsyncStorage.clear();

const keys = await AsyncStorage.getAllKeys();

const result = await AsyncStorage.multiGet(['key1', 'key2']);
// result: [['key1', 'value1'], ['key2', 'value2']]

await AsyncStorage.multiSet([['key1', 'value1'], ['key2', 'value2']]);

await AsyncStorage.multiRemove(['key1', 'key2']);

await AsyncStorage.mergeItem('user_profile', JSON.stringify({ age: 30 }));

useEffect는 React에서 사이드 이펙트를 처리하기 위한 훅이다. 사이드 이펙트란 데이터 fetching, 구독 설정, DOM 직접 조작 등 컴포넌트의 렌더링과는 직접적인 관련이 없는 작업을 의미한다. 컴포넌트가 렌더링될 때마다 특정 작업을 수행하고, 필요에 따라 정리 작업을 수행할 수 있도록 한다. useEffect 훅은 다음과 같은 방식으로 사용된다.

1. 기본 사용법: useEffect는 컴포넌트가 렌더링될 때마다 실행된다. 기본적으로 useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 실행할 함수이며, 두 번째 인자는 의존성 배열이다. 의존성 배열에 지정된 값이 변경될 때만 실행된다. 만약 두 번째 인자를 제공하지 않으면, useEffect는 매번 렌더링될 때마다 실행된다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
}, []);

2. 의존성 배열 사용법: 의존성 배열을 사용하면 useEffect가 언제 실행될지를 제어할 수 있다. 배열에 포함된 값이 변경될 때만 useEffect가 실행된다. 만약 배열이 빈 배열이라면, useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

useEffect(() => {
  // count가 변경될 때만 함수 실행
}, [count]);

3. 정리 함수: useEffect는 함수에서 반환된 값을 정리 함수로 사용하여 컴포넌트가 언마운트될 때나 의존성 배열의 값이 변경될 때 정리 작업을 수행할 수 있다. 이 정리 함수는 일반적으로 구독 해제나 타이머 정리와 같은 작업을 수행한다.

useEffect(() => {
  // 사이드 이펙트 작업
  return () => {
    // 컴포넌트가 언마운트될 때나 의존성 배열이 변경될 때 함수 호출
  };
}, [dependency]);

4. 의존성 배열 생략: 의존성 배열을 생략하면, useEffect는 매 렌더링마다 실행된다. 이 경우 주의가 필요하며, 불필요한 리렌더링이 발생할 수 있다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
});

이와 같이, useEffect를 사용하면 React 컴포넌트의 라이프사이클에 맞춰 적절히 사이드 이펙트를 관리할 수 있다.

React는 단일 페이지 애플리케이션(SPA)을 구축하는 데 사용되는 인기 있는 자바스크립트 라이브러리로, 재사용 가능한 UI 컴포넌트를 만들고 상태를 효율적으로 관리하며, 데이터 변경 시 UI가 자동으로 업데이트되도록 한다. React의 기본 개념을 다음과 같이 설명할 수 있다.

1. 컴포넌트 (Components)

• 정의: React 애플리케이션은 컴포넌트로 구성되며, 이는 UI를 정의하는 독립적이고 재사용 가능한 코드 조각이다. 컴포넌트는 클래스 기반 또는 함수 기반을 사용한다.
• 유형:
  • 함수형 컴포넌트 (Functional Components): JSX를 반환하는 자바스크립트 함수이다. 상태나 생명 주기 메서드를 관리할 필요가 없을 때 주로 사용된다.
  • 클래스 컴포넌트 (Class Components): React.Component를 확장한 ES6 클래스이다. 상태나 생명 주기 메서드를 사용해야 할 때 사용된다. 하지만 React Hooks의 도입으로 함수형 컴포넌트가 점점 더 선호되고 있다.
• 예제

function HelloWorld() { 
	return <h1>Hello, World!</h1>; 
}

2. JSX (JavaScript XML)

• 정의: JSX는 HTML과 유사한 구문 확장으로, React에서 UI를 설명하는 데 사용된다. 자바스크립트 내에서 HTML과 유사한 코드를 작성할 수 있으며, React는 이를 자바스크립트 호출(React.createElement)로 변환한다.
• 예제

const element = <h1>Hello, World!</h1>;

3. 상태 (State)

• 정의: 상태는 동적 데이터를 저장하고 컴포넌트의 동작을 결정하는 객체이다. 상태를 통해 사용자의 입력, 네트워크 응답 등 변경 사항에 따라 컴포넌트가 반응할 수 있다.
• 상태 관리:
  • 클래스 컴포넌트에서: 상태는 this.state를 사용하여 관리되며, this.setState()를 사용하여 업데이트됩니다.
  • 함수형 컴포넌트에서: React Hooks, 특히 useState를 사용하여 상태를 관리합니다.
• 예제 (useState 훅 사용)

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

4. 프롭스 (Props)

• 정의: 프롭스(Props)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용된다. 프롭스는 읽기 전용이며, 전달받은 컴포넌트에서 수정할 수 없다.
• 예제

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

function App() {
  return <Greeting name="KDH" />;
}

5. 생명 주기 메서드 (Lifecycle Methods)

• 정의: 생명 주기 메서드는 클래스 컴포넌트에서 컴포넌트의 생명 주기(예: 마운트, 업데이트, 언마운트) 단계에 따라 특별한 작업을 수행할 수 있도록 해주는 메서드이다.
• 주요 생명 주기 메서드:
  • componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출된다.
  • componentDidUpdate(): 컴포넌트의 상태나 프롭스가 변경된 후 호출된다.
  • componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출된다.
• 참고: React Hooks가 도입되면서, 함수형 컴포넌트에서 useEffect 훅을 사용해 생명 주기 메서드와 유사한 기능을 구현할 수 있다.

6. React Hooks

• 정의: 훅(Hooks)은 함수형 컴포넌트에서 상태 및 기타 React 기능을 사용할 수 있도록 해주는 함수다.
• 주요 훅:
  • useState: 함수형 컴포넌트에 상태를 추가할 수 있다.
  • useEffect: 데이터 가져오기나 서비스 구독과 같은 부작용을 처리한다.
  • useContext: 프롭스를 수동으로 전달하지 않고도 컴포넌트 트리를 통해 데이터를 전달할 수 있는 컨텍스트(Context)를 사용할 수 있다.

7. 가상 DOM (Virtual DOM)

• 정의: 가상 DOM은 실제 DOM의 가벼운 표현이다. React는 실제 DOM의 사본을 메모리에 유지하며(가상 DOM), 상태가 변경되면 DOM의 변경된 부분만 업데이트하여 렌더링 효율을 높인다.

8. 이벤트 처리 (Handling Events)

• 정의: React는 일반 HTML에서 이벤트를 처리하는 것과 유사하게 이벤트를 처리하지만, 약간의 문법적 차이가 있다(예: 이벤트 이름은 카멜 케이스로 작성하며, 문자열 대신 함수를 전달)
• 예제

function Button() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

9. 조건부 렌더링 (Conditional Rendering)

• 정의: React는 if, else 또는 삼항 연산자와 같은 표준 자바스크립트 제어 구조를 사용하여 조건에 따라 다른 출력을 렌더링할 수 있다.
• 예제

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

10. 리스트와 키 (Lists and Keys)

• 정의: React에서 .map() 메서드를 사용하여 데이터 목록을 렌더링할 수 있으며, 각 목록 항목에는 고유한 "key" 프롭을 지정하여 React가 어떤 항목이 변경되었는지, 추가되었는지, 제거되었는지를 식별할 수 있도록 한다.
• 예제

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);