사전 검색 서비스 (리액트 버전)

 

import './App.css';
import React, { Component } from 'react';
import Word from './Word'

class App extends Component {
  state = {
    words: []
  }
  componentDidMount(){
    const BASE_URL = 'https://dictionary-search.herokuapp.com/api/words'
    fetch(BASE_URL, {
      headers: {
          "Content-Type": "application/json",
          // "Access-Control-Allow-Origin": "*" // 이 코드 때문에 CORS 에러가 발생한것임. 이 코드 주석처리하면 프론트엔드에서 곧바로 외부 API 접근가능하다. (프록시나 서버가 필요없음)
      }
    })
    .then( res => res.json())
    .then( data => {
          console.log(data)
          const {words} = data;
          this.setState({ words })
      })
  }

  render(){
    const { words } = this.state
    
    return (
      <div className="App">
        {words.map( (word, id) => {
          return (
            <Word 
              key={id}
              r_link={word.r_link}
              r_word={word.r_word}
              r_hanja={word.r_hanja}
              r_des={word.r_des}
            ></Word>
          ) 
        })}
      </div>
    );
  }
}

export default App;

App.js 파일을 위와 같이 작성하자!

.App{
  width: 60%;
  columns: 2;
  margin: 50px auto;
}

App.css 파일을 위와 같이 작성하자!

import './Word.css'

function Word({ r_link, r_word, r_hanja, r_des}){
    return (
        <div className="item">
            <div className="word">
                <a href={r_link}>{r_word} {r_hanja}
                </a>
            </div>
            <p className="description">{r_des}</p>
        </div>
    )
}
export default Word;

Word.js 파일을 위와 같이 작성하자!

.item {
    width: 100%;
    margin-bottom: 10px;
    background: tomato;
    display: inline-block; /* 컬럼 짤림 방지*/
    background: lightgreen;
}

Word.css 파일을 위와 같이 작성하자!