[리액트]Axios와 페이지네이션

☑️Axios 

비동기처리로 자바스크립트의 HTTP 클라이언트 라이브러리 HTTP 요청을 보내고 응답을 처리하기 위해 사용

 

[마이페이지에서 회원정보 가져올 때 예시]

const Axios_Ex2 = () => {
    const [comments, setData] = useState(null); 
    
    useEffect (() => {
        axios.get("http://localhost:8081/마이페이지/회원정보조회")
            //무사히 잘 가져왔다면 then으로 data 값 변경6+
            .then(res => {
                setData(res.comments);
            })
            //가져오는데 실패했다면 에러 보여주기
            .catch( () => {
                alert("데이터를 가져오는데 실패했습니다.");
            });
    },[] );

    return (
        <>
            <ul>
            {회원정보들.map(각각의정보하나씩살펴보기 => (
                <li key={ comment.id }>
                    <strong>UserID : </strong>{ comment.id } <br/>
                    <strong>Name : </strong>{ comment.name } <br/>
                    <strong>Email : </strong>{comment.email } <br/>
                    <strong>Body: </strong>{ comment.body} <br/>

                </li>
            ))}
            </ul>
        </>

 

☑️AJAX_Fetch

  서버와 통신해서 웹 페이지를 새로고침하지 않고 데이터를 가져오거나 보낼 수 있게 해주는 기술

  Jquery로 이용되는 자바 스크립트에서 많이 이용

   React에서는 Ajax대신 fetch API 또는 Axios와 같은 라이브러리를 사용

   -  fetch API 는 리액트 자체에 있기 때문에 npm install을 하지 않는다! -> 리액트에 있는 것을 가지고 오기 때문에 

       API라고 씀 , API는 기술을 가지고 오는 연결 주소이다!~

   - Axios 라이브러리는 npm install해서 설치해서 외부에서 만들어진 기능(npmJs)을 가져와서 사용

const 패치예제 = () => {
   const [유저들, set유저들] = useState([]);
   //데이터 가져오기 useEffect
   useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(res => {
           return res.json();
    })
        .then(data => {
           //set사진들(data); api 주소에 작성된 모든 데이터 가져오기
           //데이터의 일부분만 가져오길 원한다면 slice를 이용
           //slice(처음가져올범위, 어디까지가져올지마무리하는마무리범위)
           set사진들(data.slice(0,10)); //데이터 처음~ 10개 사진만 가져오기
     })
     .catch(err => {
         alert("에러 발생" + err);
     })
     },[]);
      return(
       <>
       <h1>User List 보기</h1>
          {유저들.map(유저 => (
              <li key={유저.id}>{유저.name}</li>
          ))}
       
       </ul>
       </>
       export default 패치예제;
    
      )
    }

 

✔️ HTML - css 사용자가 텍스트 영역 크기 변경을 막아줌

character-image {
   width : 390px;
   height: 90px;
   /*사용자가 텍스트 영역 크기 변경을 막아줌*/
   resize:none;
   
   }