유데미 취업부트캠프 - 프론트엔드&백엔드 : 12일차 TIL

이어제에 이어서 리액트 학습을 하였다!

단기특강 코스로 듣다보니, 학습의 양이 좀 많았다!

 

---

 

조건부 렌더링

다양한 방식으로 조건에 따라 컴포넌트 렌더링을 할 수 있는데, 지금과 같이 true 경우에만 렌더링할땐, &&연산자를 사용하는 것이 좋다!

3항 연산자

{ModalIsVisible ? (
        <Modal onClose={hideModalHandler}>
          <NewPost
            onBodyChange={bodyChangeHandler}
            onAuthorChange={authorChangeHandler}
          />
        </Modal>
      ) : null}

false일땐 null

 

&&연산자

{ModalIsVisible && (
        <Modal onClose={hideModalHandler}>
          <NewPost
            onBodyChange={bodyChangeHandler}
            onAuthorChange={authorChangeHandler}
          />
        </Modal>
      )}

 

변수 사용

let modalContent;
  if (ModalIsVisible) {
    modalContent = (
      <Modal onClose={hideModalHandler}>
        <NewPost
          onBodyChange={bodyChangeHandler}
          onAuthorChange={authorChangeHandler}
        />
      </Modal>
    );
  }

  return (
    <>
      {modalContent}
      <ul className={classes.posts}>
        <Post author={enteredAuthor} body={enteredBody} />
        <Post author="Manuel" body="Check out the full course!" />
      </ul>
    </>
  );
}

변수를 사용해서 관리할때, 좀 더 효율적인 경우가 있지만 지금과 같이 단순한 경우에는 지양하는 것이 좋다.

 

 

useState의 상태 업데이트 함수

 

const [posts, setPosts] = useState([]);

  function addPostHandler(postData) {
    setPosts([postData, ...posts]);
  }

 

setCount((prevCount) => prevCount + 1);

 

현재 상태의 스냅샷을 매개변수로 받는다!

그리고, return 값으로 새로운 상태를 반환해야한다.

 

리액트는 내부에서 상태 업데이트 함수를 바로 실행하지 않고, 예약해두는 것이라고 한다!

그래서 여러 업데이트가 엉켜서 잘못된 상태를 갱신할 수 있지만, 리액트가 최신버전의 유효상태를 가져와 제대로 갱신하도록 해준다.

 

SPA & Router

 

SPA

React를 사용한 단일 페이지 애플리케이션(Single Page Application, SPA)은 전통적인 다중 페이지 애플리케이션과는 다르게, SPA는 하나의 HTML 페이지를 로드하고, 사용자가 애플리케이션을 사용하는 동안 페이지를 다시 로드하지 않고 필요한 부분만 동적으로 업데이트합니다.

 

Router

 

리액트 SPA에서는 경로에 따라 다른 뷰를 띄운다. 이때 라우팅의 개념을 사용한다.

라우팅은 다른 주소에 따라 각 다른 뷰를 보여주고, 경로에 따라 변환해준다.

즉, SPA라고 하지만 각 다른 뷰를 가지고 있는데 , 각 다른 주소를 부여하고 경로 변경으로써 다른 뷰를 보여주는것!

 

 

const router=createBrowerRouter([
  {path:'/', 
  element:<RootLayout/>, 
  children:[
    {path:'/',
    element:<Posts/>,
    children:[
      {path:'/create-post',element:<NewPost/>}
    ]}
  ]}
])


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

createBrowerRouter로 만든 라우팅을 RouterProver의 속성에 넣어 render안에 넣어준다!

 

 

 

Fetch

fetch() 함수는 웹 API로, 네트워크 리소스를 비동기적으로 요청하고 응답을 다루는 데 사용되며, AJAX 요청을 쉽게 만들 수 있습니다. 이 함수는 Promise를 반환하며, 네트워크 요청을 비동기적으로 처리할 수 있도록 도와줍니다.

fetch(url, options)
  .then(response => {
    // 응답을 처리
    return response.json(); // 또는 response.text(), response.blob() 등을 사용할 수 있음
  })
  .then(data => {
    // 처리된 데이터를 사용
  })
  .catch(error => {
    // 오류를 처리
  });

 

(매개변수)

• url: 요청을 보낼 URL입니다.
• options: 설정 객체로, 요청에 대한 여러 옵션을 설정할 수 있습니다. 메서드, 헤더, 바디 등이 여기에 포함됩니다.
  • method: HTTP 메서드를 지정합니다. 기본값은 "GET"입니다.
  • headers: 요청 헤더를 지정하는 객체
  • body: 요청의 바디 지정.  (데이터를 보낼 때는 JSON.stringify()를 사용해 JSON로 포맷해서 보낸다)
  • mode: 요청 모드 지정. ("cors", "no-cors", "same-origin" 등이 가능)

 

POST: 서버로 요청 보내기

function addPostHandler(postData) {
    fetch("http://localhost:8080/posts", {
      method: "POST",
      body: JSON.stringify(postData), //json으로 변환해서 요청
      headers: {
        "Content-Type": "application/json",
      },
    });
    setPosts([postData, ...posts]);
  }

server

백엔드에서 정보를 받아 파일에 저장한다.

 

 

GET: 서버로부터 data 받아오기

Promise 객체

Promise는 비동기 작업을 처리하기 위한 객체로, 비동기 작업은 주로 네트워크 요청, 파일 읽기, 타이머 등과 같이 시간이 걸리는 작업을 의미한다.

Promise는 비동기 작업의 성공 또는 실패와 같은 최종 결과를 나타내는데 사용됩니다.

 

• 대기(pending): 초기 상태로, 프로미스가 성공하거나 실패할 때까지의 상태입니다.
• 이행(fulfilled): 비동기 작업이 성공적으로 완료되어 프로미스가 결과값을 반환한 상태입니다.
• 거부(rejected): 비동기 작업이 실패하거나 오류가 발생한 상태입니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행 (예: 네트워크 요청)
    const data = /* ... */;
    
    // 성공적으로 완료된 경우
    if (data) {
      resolve(data);
    } else {
      // 실패한 경우
      reject('Error fetching data');
    }
  });
};

// 프로미스 사용
fetchData()
  .then(result => {
    console.log('Success:', result);
  })
  .catch(error => {
    console.error('Error:', error);
  });

resolve와 reject는 프로미스의 상태를 변경하는 함수로,

성공 시 resolve를 호출하여 프로미스를 이행 상태로 만들고, 실패 시 reject를 호출하여 프로미스를 거부 상태로 만든다.

 

 

useEffect

React Hook 중 하나로, 함수형 컴포넌트에서 부수 효과(side effects)를 수행하기 위해 사용된다.

부수 효과란 컴포넌트 외부에 영향을 미치는 작업을 말하며, 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등이 해당된다.

fetch("http://localhost:8080/posts")
    .then((response) => response.json())
    .then((data) => setPosts(data.posts));


//server return 값
//res.json({ posts: storedPosts });

강의에서 이와 같은 예시를 들면서, useEffect를 사용해야 하는 이유를 설명해줬다.

항상 useEffect를  정확히 언제 사용해야하는지 정확히 잘 모르는 상태였는데 이참에 알게되었다!

 

위와 같은 코드에서 fetch를 통해 서버에서 받아온 데이터를 setPosts(상태 업데이트 함수)로 상태를 업데이트 하고자 한다.

 

🤔 왜 이렇게 사용하면 안될까?? 

 

💡

상태 업데이트 함수를 통해 새로운 상태로 갱신 → 컴포넌트 함수가 다시 실행 → (함수가 다시 실행되어) fecth 요청 다시 보내고, 데이터 받고, 상태 갱신하고...? → 같은 동작 무한 반복...!!!

 

useEffect를 사용한다면?

useEffect가 컴포넌트 함수에서 sideEffect를 적절하게 일으키기 때문에, 수행하려는 동작이 JSX에 영향을 미치지 않고, 나중에 간접적으로 영향을 주거나 UI의 다른작업을 하는 경우에 사용한다고 한다. 그래서 무한루프 없이 실행할 수 있다고 한다.

 

useEffect(() => {
  // 부수 효과를 수행하는 코드
  // ...

  // 부수 효과를 정리하는(clean-up) 코드 (옵션)
  return () => {
    // 정리 코드
    // ...
  };
}, [dependencies]);

 

(매개변수)

• 콜백 함수: useEffect의 첫 번째 매개변수로 전달되는 함수는 컴포넌트가 렌더링될 때마다 실행된다. 함수가 실행되어야 판단될때, 알아서 실행된다!
• 의존성 배열 (dependencies): 두 번째 매개변수로 전달되는 배열은 useEffect가 의존하는 값들의 목록이다. 이 배열에 포함된 값들 중 하나라도 변경되면 useEffect가 다시 실행됩니다. (빈 배열[]은 , useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행)
  컴포넌트 함수와 함께 실행되어야할 때 사용!
• 정리(clean-up) 함수: useEffect 안에서 반환된 함수는 컴포넌트가 언마운트되거나 의존성 배열에 있는 값이 변경될 때 실행됩니다. 이를 이용하여 부수 효과에서 생성된 리소스를 정리하거나 구독을 해제할 수 있습니다.

 

useNavigate

 

 

<a>처럼 클릭시 url을 이동하는것은 Link 태그를 사용하지만, 

위 예시같이 모달<div> 클릭시 이벤트핸들러 함수에 useNavigate hook을 사용해 페이지를 이동하는 방법이 있다

 

 

loader(): 데이터 가져오기

loader 프로퍼티는 함수를 값으로 받고, react-router는 해당 라우터가 활성화 될때(렌더링)마다 loader에 있는 함수를 실행한다.

-> 라우트 컴포넌트(하위포함)에게 필요한 데이터를 미리 로드해둘 수 있다.

 

❗️ 비동기함수를 넣어도되지만, promise를 리턴한다면 promise값을 받을때까지 기다렸다가 해당 컴포넌트를 렌더링한다.

 

export async function loader() {
  const response = await fetch("http://localhost:8000/posts");
  const resData = await response.json();
  return resData.posts;
}

(보통 해당 component에 loader함수를 작성)

 

컴포넌트 바깥에서 실행되기 때문에, 컴포넌트 상태를 바꾸지 않아 useEffect를 사용하지 않아도된다!

화면에 표시할 데이터를 반환하면 , 그 데이터를 현재 라우트에 렌더링된 요소가 받는다.

 

import Posts,{loader as postsLoader} from './routes/Posts'
import NewPost,{action as newPostAction} from './routes/NewPost'
import PostDetails,{action as postDetailLoader} from './routes/PostDetails'

const router=createBrowerRouter([
  {path:'/', 
  element:<RootLayout/>, 
  children:[
    {path:'/',
    element:<Posts/>,
    loader: postsLoader
    children:[
      {path:'/create-post',element:<NewPost/> action:newPostAction }
      {path:'/:id',element:<PostDetails/> loader:postDetailLoader}
      
    ]}
  ]}
])

loader()에서 반환한 데이터는 Posts 컴포넌트& 중첩된 컴포넌트에서 사용할 수 있게된다.

 

loader의 객체 request, params를 사용하면 라우트의 id에 가져올수있따

 

useLoaderData

컴포넌트 함수 내부에서 loader()에서 반환한 데이터를 갸져올 수 있다.

👉🏻 내부 PostList의 (useEffect의)fetch부분과 가져온 데이터를 위한 state, loading상태 까지 모두 지워버릴수 있다!

 

action(): 데이터 보내기

 

해당 라우터에서 form이 전송될때 실행된다.

 

❗️ react-router-dom의 Form 컴포넌트를 사용하면 , form 전송을 처리해 브라우저가 요청을 전송하지 못하게 막아주고, 모든 입력 데이터를 수집해 해당 데이터의 객체를 구성해준다.

 

form안의 name 속성에 정의한 이름을 사용해 데이터를 추출한다.

import NewPost,{action as newPostAction} from './routes/NewPost'

const router=createBrowerRouter([
  {path:'/', 
  element:<RootLayout/>, 
  children:[
    {path:'/',
    element:<Posts/>,
    loader: postsLoader
    children:[
      {path:'/create-post',element:<NewPost/>,action:newPostAction}
    ]}
  ]}
])

 

👉🏻 덕분에, useState, eventhandler 함수들도 모두 삭제할 수있다.

 

redirect()

action, loader함수 안에서 호출해, 이 함수의 호출 결과를 반환할 수 있다. (응답 객체가 만들어짐)

-> 우리가 이동하고자 하는 경로로 이동시켜준다.