데이터 패치

• 로컬 데이터: 동적 호출(Dynamic Import) 방식 활용

• 원격 데이터: Promise 또는 Async/Await를 사용하여 비동기 호출

• 응답(Response) 받은 데이터를 사용해 컴포넌트 상태 업데이트

※ 비동기 통신을 사용한 데이터 패치 과정은 부작용(Side Effect)의 범주에 해당되므로 라이프 사이클 훅 함수를 사용해야 합니다.

1. 로컬 데이터, 동적 import 활용

로컬 JSON 데이터를 동적으로 호출한다.

class App extends Component {
  // 메서드
  fetchData = () => {
    import('@api/ediyaDB.json')
      .then(module => console.log(module))
      .catch(error => console.error(error.message));
  };

  // 라이프 사이클 훅
  componentDidMount() {
    this.fetchData();
  }
} 

2. 원격 데이터, fetch API (Promise) 활용

Firebase의 ediyaDB.json 데이터를 비동기 통신 요청하여 응답 받은 데이터를 JSON으로 변경하여 패치(Fetch) 할 수 있습니다.

Firebase에 새로운 프로젝트를 생성한 후, 실시간 데이터베이스를 만들어 JSON을 추가한 다음 원격 서비스에 이용할 수 있습니다.

.env

먼저 Firebase API, JSON 요청 경로를 환경 변수(.env) 파일에 추가합니다. 환경 변수는 전역 변수처럼 사용이 가능합니다.

REACT_APP_FB_API=//euid-blended-learning.firebaseio.com/ediyaDB.json 

환경 변수는 빌드 과정에서 임베드(embed) 되므로 외부에 공개되면 안되는 보안 코드를 사용해서는 안됩니다!

2.1 src/App/App.js

process.env를 통해 등록한 환경 변수 값을 가져와 데이터를 패치하는 구문을 작성합니다.

// 환경 변수 값, 구조 분해 할당
const { REACT_APP_FB_API } = process.env;

fetchData = () => {
  fetch(REACT_APP_FB_API)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error.message));
};

const fetchData = useCallback(() => {
    import('../../data/homeContext.json').then((module) => {
      const { default: _default } = module
      const { ko: koHomeData } = _default[0]
      setHomeContent(koHomeData)
    })
  }, [])

// 데이터를 불러오고 난 다음 객체 구조 분해 할당을 해야하기 때문에 아래에 fetchData 보다 아래 배치한다. 
  const [homeContent, setHomeContent] = useState({})
  const { title, subTitle, signUp, promotionInfo } = homeContent

  useEffect(() => {
    fetchData()
  }, [fetchData])

2.2 원격 데이터, Async/Await 활용

ES7의 async 함수를 사용해 데이터 패치를 비동기 통신으로 처리해봅니다.

fetchData = async () => {
  try {
    const response = await fetch(FIREBASE_DB_ADDRESS);
    const data = await response.json();
    console.log(data);
  } catch(error) {
    console.error(error.message);
  }
};

Async/AwaitJavaScript

3. Firebase 데이터베이스

Firebase실시간 데이터베이스를 사용하여 JSON을 원격으로 서비스 할 수 있습니다.

다음의 Firebase 데이터베이스 규칙을 참고하여 원하는 규칙을 설정합니다. (개발 중에는 '공개 규칙' 사용)

3.1 기본 규칙

// 이 규칙은 그 누구도 데이터베이스에 대한 읽기, 쓰기 접근을 허용하지 않습니다.
{
  "rules": {
    ".read": false,
    ".write": false
  }
}

3.2 공개 규칙

// 이 규칙은 누구에게나 데이터베이스에 대한 읽기 접근 권한이 부여됩니다. (쓰기는 안 됨)
{
  "rules": {
    ".read": true,
    ".write": false
  }
}

3.3 인증된 사용자 규칙

// 이 규칙은 Firebase 인증 토큰에서 인증 된 사용자의 ID와 일치하는 노드에 대한 접근 권한을 부여합니다.
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}