Techniques for dealing with REACT_immer

$ yarn creat react-app immer-tutorial
$ cd immer-tutorial
$ yarn add immer

immer를 사용하지 않고 불변성 유지

//App.js

import {useRef, useCallback, useState} from 'react';

const App = () => {
  
  
  return (
    <div>
       <form onSubmit={onSubmit}>
   		  <input
			 name="userName"
			 placeholder="아이디"
			 value={form.userName}
			 onChange={onChange}
		  />
          <input
			 name="name"
			 placeholder="이름"
			 value={form.name}
			 onChange={onChange}
		  />
          <button type="submit">등록</button>
       </form>
	   <div>
       	  <ul>
            {data.array.map(info => (
               <li 
             	 key={info.id}
				 onClick={() => onRemove(info.id)}
			   >
                  {info.userName} ({info.name})
               </li>
             ))  
          </ul>     
       </div>
    </div>
  )
};

export default App;

axios 로 API 호출해서 데이터 받아오기

• axios : 자바스크립트 HTTP 클라이언트
• 이 라이브러리의 특징 : HTTP요청을 Promise 기반으로 처리한다.

$ yarn create react-app news-viewer
$ cd news-viewer
$ yarn add axios

// .prettierrc (코드 스타일을 자동으로 정리하고 싶을 때 프로젝트 루트에 파일 수동생성 입력)

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}


// App.js
// 불러오기 버튼을 누르면 JSONPlaceholder의 가짜 API 호출하고 응답을 컴포넌트 상태에 넣어서 보여주는 예제코드

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

const App = () => {
  
  return (
    <div>
      <div>
    	// onClick함수에서는 axios.get 함수를 사용
    	// 이 함수는 파라미터로 전달된 주소에 GET요청을 해주고 결과는 .then을 통해 비동기적으로 확인
    	<button onClick={onClick}> 불러오기 </button>
      </div>
//	  {data && < />}
	  {data && 
        <textarea 
       		rows={7} 
       		value={JSON.stringify(data, null, 2)} 
			readOnly={true} 
		/>
	  }
    </div>
  );
};

export default App;

• 위 코드 + async 적용

// App.js

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

const App = () => {
  const [data, setDate] = useState(null);
  // 화살표함수에 async/await 적용할 때는, async () => {} 형식으로 적용함.
  const onClick = async () => {
    try {
      const response = await axios.get('http://jsonplaceholder.typicode.com/todos/1');
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };
  
  return (
    <div>
      <div>
    	// onClick함수에서는 axios.get 함수를 사용
    	// 이 함수는 파라미터로 전달된 주소에 GET요청을 해주고 결과는 .then을 통해 비동기적으로 확인
    	<button onClick={onClick}> 불러오기 </button>
      </div>
//	  {data && < />}
	  {data && 
        <textarea 
       		rows={7} 
       		value={JSON.stringify(data, null, 2)} 
			readOnly={true} 
		/>
	  }
    </div>
  );
};

export default App;