리액트 프로젝트 - 프로필 조회

semin Ryu·2023년 11월 30일

Fetch React useState userEffect 리액트 서버통신

유저 프로필 조회

이번에 구현한 기능은 로그인을 한 이후 유저 프로필 조회를 위해 그 유저의 정보를 백엔드 서버로부터 받아와 화면에 표시하는 기능입니다.

통신에 필요한 값 가져오기

사용자 프로필을 보여주는 UserProfile 컴포넌트를 만들어, 로그인할 때 세션 스토리지에 저장하였던 사용자의 이메일, 토큰 정보를 가져옵니다.

const email = sessionStorage.getItem("email");
const token = sessionStorage.getItem("token");

초기값 설정

useState를 사용하여 서버로부터 받아올 정보를 저장하기 위해 user라는 상태를 만들고, 초기값을 설정하고 있습니다.

const [user, setUser] = useState({
  name: "유저",
  profileImage: "https://via.placeholder.com/150x150",
  email: "None@naver.com",
  nickname: "닉네임",
  phoneNumber: "010-0000-0000",
});

서버와 통신

fetch를 사용하여 서버에 GET 요청을 보냅니다. 이 때, 요청 헤더에 "Content-Type"과 "Authorization"을 설정하여, JSON 형식의 데이터를 요청하고, 사용자의 인증 토큰을 전달하고 있습니다.

const response = await fetch(
  '서버 URL/user?email='+email,
  {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Authorization": ${token}
    },
  }
);

useEffect, useState

useEffect를 사용하여 컴포넌트가 렌더링된 후에 서버로부터 사용자 정보를 가져오는 작업을 수행하고 있습니다. 이 때, fetch를 사용하여 비동기적으로 서버에 요청을 보내고, 응답의 상태 코드가 200, 요청이 성공적으로 완료된 경우 useState를 사용하여 받아온 응답 값으로 상태를 업데이트하고 있습니다.

useEffect(() => {	//userEffect 사용
      const fetchData = async () => {
      const response = await fetch(
        '서버URL/user?email='+email,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `${token}`
          },
        }
      );
      const result = await response.json();
      if (response.status === 200) {
        setUser({	//userState 사용
          name: result.name,
          nickname: result.nickname,
          email: result.email, 
          phoneNumber : result.phoneNumber, 
          profileImage: result.profileImage
        });
      } else {
        console.log("실패");
      }
    };
    fetchData();
  }, []);

받아온 정보를 html으로 화면에 표시

서버로부터 받아온 사용자 정보를 화면에 표시하고 있습니다.
user 상태의 profileImage, name, nickname, email, phoneNumber 속성을 사용하여 사용자의 프로필 이미지와 이름, 닉네임, 이메일, 전화번호를 화면에 표시하고 있습니다.

    <div className="user-profile">
      <div className="profile-section">
        <div className="profile-image">
          <img src={user.profileImage} alt="프로필 사진" />
        </div>
        <div className="user-info">
          <h2>{user.name}</h2>	
          <p>{user.nickname}</p> 
          <p>{user.email}</p>
          <p>{user.phoneNumber}</p>
        </div>
      </div>

      <div className="profile-btn-container">
        <Link to="/user/edit" className="user-link">
          <button className="edit-profile-btn">
            <span role="img" aria-label="pencil">
              ✏️
            </span>{" "}
            나의 회원정보 수정
            <div className="move-page-icon">
              <FontAwesomeIcon icon={faChevronRight} />
            </div>
          </button>
        </Link>

        <Link to="/user/chattingList" className="user-link">
          <button className="chattingList-btn">
            <span role="img" aria-label="conversation">
              💬
            </span>{" "}
            나의 1대1 상담 내역
            <div className="move-page-icon">
              <FontAwesomeIcon icon={faChevronRight} />
            </div>
          </button>
        </Link>
      </div>

      <div className="move-seller-page-btn-container">
        {isSeller && (
          <button
            className="move-seller-page-btn"
            onClick={handleConnectSeller}
          >
            사장님 페이지 연결
            <div className="move-page-icon">
              <FontAwesomeIcon icon={faChevronRight} />
            </div>
          </button>
        )}
      </div>

      <div className="user-logout-btn-container">
        <button className="user-logout-btn" onClick={handleLogout}>
          로그아웃
          <div className="move-page-icon">
            <FontAwesomeIcon icon={faChevronRight} />
          </div>
        </button>
      </div>
    </div>