모든 기능을 갖춘 React Native WordPress 템플릿에 대한 작업을 마무리하면서 (예,이 템플릿을 출시했고 그 결과가 자랑 스럽습니다!) 많은 React Native 개발자가 WordPress REST API와 React를 통합하는 작업에 직면하게 될 것임을 깨달았습니다. 원주민. 결과적으로 저는 WordPress 백엔드로 React Native 앱을 구축하는 프로그래머를 돕기 위해 배운 내용을 공유하기로 결정했습니다.

https://www.instamobile.io/react-native-tutorials/wordpress-rest-api-react-native-acf/ 

대부분의 사람들이 이미 알고 있듯이 WordPress에는 기본적으로 REST API가 제공됩니다. 저를 믿지 않으시면 https://www.instamobile.io/wp-json/wp/v2/posts 링크를 확인하세요. 블로그의 모든 게시물과 함께 페이지가 매겨진 JSON 응답을 반환합니다. 나는 워드 프레스만 설치했고 어떤 특별한 마법도 하지 않았다고 맹세합니다. 똑같은 URL을 사용해보세요. 하지만 블로그에 대해서는 놀라울 것입니다. 다음은 이 경우 WordPress API가 반환하는 내용의 스니펫입니다.

이제 React Native News Reader 앱이 이러한 아름다운 형식의 게시물을 표시하기 위해 해야 ​​할 일은 HTTP 요청을 통해 가져 오는 것입니다. 다행히 이것은 React Native의 간단한 작업이며 초보자도 한 번 이상 수행 했어야 합니다. WordPress API에서 React Native의 데이터를 가져 오는 것은 다음과 같이 간단합니다.

1. getPosts() {
2. return fetch(
3. "https://instamobile.io/wp-json/wp/v2/posts?page=" + this.state.page
4. )
5. .then(response => response.json())
6. .then(responseJson => {
7. this.setState(prevState => ({
8. posts: [...prevState.posts, ...responseJson],
9. isLoading: false
10. }));
11. })
12. .catch(error => {
13. console.error(error);
14. });
15. }

“fetch”메소드는 주어진 URL에 네트워크 요청 (GET)을 합니다. 이 경우에는 WordPress 블로그에 REST API URL을 제공합니다 (세 번째 줄의 instamobile.io URL 참고). 응답이 돌아 오면 JSON으로 구문 분석 한 다음 기존 (이미 표시된) 기사 끝에 게시물을 추가합니다. 실제로 이것은 기본적으로 React 컴포넌트의 상태를 업데이트하는 것입니다.

WordPress REST API는 페이지가 매겨져 있으므로 특정 페이지를 가져 오려면 GET 요청 내에 "page"라는 추가 매개 변수를 제공해야 합니다. 사용자가 블로그 게시물 목록을 아래로 스크롤 할 때 항상 새 페이지를 가져 오도록 현재 페이지를 상태 개체에 저장합니다.

또한 상태 객체에 "isLoading"부울 변수를 저장하여 처리 중인 가져 오기 요청이 있는지 렌더링 된 구성 요소에 알립니다. React Native WordPress 앱에서 화면 하단에 스피너를 표시하여 사용자에게 어떤 일이 일어나고 있음을 알리고 새로 가져온 기사를 기다려야 합니다.

더 이상 고민하지 않고 React Native에서 검색된 WordPress 기사를 표시하는 방법은 다음과 같습니다.

1. return (
2. <FlatList
3. data={this.state.posts}
4. renderItem={({ item }) => (
5. <News
6. navigation={this.props.navigation}
7. title={item.title.rendered}
8. image={item.acf.author_photo}
9. day={item.date}
10. data={item}
11. />
12. )}
13. keyExtractor={item => item.id.toString()}
14. onEndReached={this.handleLoadMore}
15. onEndReachedThreshold={1}
16. />
17. );

우리는 기사 목록을 표시하기 위해 평범한 오래된 FlatList를 사용하고 있습니다. 각 항목에 대해 여러 속성을 가져와 렌더링 하는 "News"라는 사용자 지정 구성 요소를 표시합니다. 여기서 중요한 관찰은 JSON 응답의 필드 (“title.rendered”,“acf.author_photo”등)를 사용하고 있다는 것입니다. 이것이 마법이 일어나는 곳입니다. WordPress JSON API를 이를 표시하는 React Native 구성 요소에 연결했습니다.

"ACF"는 "Advanced Custom Fields"의 약자로, WordPress 플러그인으로 모든 WordPress 게시물에 사용자 정의 필드를 추가 할 수 있습니다. 이 플러그인은 WordPress 게시물의 추가 정보를 React Native 앱으로 전달하려는 경우 매우 유용합니다 (위의 예에서와 같이 작성자 이미지와 같음). 사용자 정의 필드의 다른 예로는 표지 사진, 작성자 이름, 태그, 색상, 짧은 제목 등이 있습니다. 다음은 WordPress 관리 대시 보드의 각 게시물에 대해 ACF 플러그인이 제공하는 스크린 샷입니다.

이 튜토리얼이 도움이 되었기를 바랍니다. WordPress REST API 백엔드로 나만의 React Native 앱을 만들어보세요.