# やあ久しぶり[기술 면접 풀어보기]

- Author: @kimyoungjo
- Published: 2024-05-21
- Updated: 2024-05-21
- Source: http://blex.me/@kimyoungjo/%E3%82%84%E3%81%82%E4%B9%85%E3%81%97%E3%81%B6%E3%82%8A%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%ED%92%80%EC%96%B4%EB%B3%B4%EA%B8%B0
- Tags: 미분류

---

4년전에 React.js로 취업 준비를 할 때 인상 깊게 봤던 모의 인터뷰 영상이 있다. https://www.youtube.com/watch?v=gnkrDse9QKc&t=2s 이 영상인데 당시에 면접준비를 하겠답시고 여러 영상, 글들을 닥치는 대로 봤었는데 제일 인상적인 인터뷰의 형태였어서 아직도 기억을 하고 있다. 당시에는 저 면접 문제들에 대해 단 한 가지도 명쾌한 답을 내지 못했는데 다시 취업을 준비하는 지금의 나는 4년전의 나보다 얼마나 성장했을지 궁금해서 재도전을 해봤다.

---
1. 버튼을 누르면 1씩 증가하는 카운터를 만들어라

```
function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <p>{count}</p>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </div>
  );
}
```

2. 임의의 사용자 api 주소가 있다 이게 무엇인지 확인해봐라

https://randomuser.me/api 제공된 url

```
  const [data, setData] = useState();

axios
      .get("https://randomuser.me/api")
      .then((response) => {
        console.log(response.data);
        setData(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
      });
			
			return (
    <div className="App">
      <div>{JSON.stringify(data, null, 2)}</div>
    </div>
  );
```

axios를 이용해 json 타입의 데이터를 확인했더니 계속해서 데이터들의 상태가 업데이트 됐다 아마 랜덤으로 유저들의 정보를 제공해주는 api 였던 것 같다. 그래서 useEffect를 이용해 랜더링 시 한 번만 api를 호출 할 수 있게끔 설정했다.

![](https://static.blex.me/images/content/2024/5/21/20245219_5l437jt60i9GBBTES4O4.png)
호출된 데이터들

3. 호출된 데이터들에 있는 이미지를 화면에 띄워봐라

```
  const [image, setImage] = useState("");

useEffect(() => {
    if (data && data.length > 0) {
      setImage(data[0].picture.large); 
    }
  }, [data]);

return (
    <div className="App">
      <div>
        <img
          src={image}
        />
      </div>
    </div>
  );
```

data의 변화에 의존하는 useEffect 훅을 이용하여 data가 호출 될 때 마다 해당 프로필의 사진 주소가 담겨있는 객체 요소에 접근을 한 후 그것을 image 라는 useState에 담아 출력했다. 

![](https://static.blex.me/images/content/2024/5/21/202452110_Rgb9UFJ8LsNH8saHtEYf.png)

실행 결과

4. 현재 제공된 api는 요청 할 때 마다 랜덤 유저들의 데이터를 제공하고 있다. 버튼을 만들어 이 버튼을 누를 때마다 이름, 프로필 사진이 담긴 유저 리스트를 담고 그 리스트를 출력하라

```
//App.js
  useEffect(() => {
    if (data && data.length > 0) {
      setUserInfo((prevUserInfo) => [...prevUserInfo, ...data]);
    }
  }, [data]);

// UserProfile.js

function UserProfile({ userInfo }) {
  return (
    <div>
      {userInfo.map((user, index) => (
        <div key={index}>
          <p>
            {user.name.title} {user.name.first} {user.name.last}
          </p>
          <div>
            <img
              src={user.picture.large}
              alt={`${user.name.first} ${user.name.last}`}
            />
          </div>
        </div>
      ))}
    </div>
  );
}


```

스프레드 연산자를 사용해 복사 배열을 만든 후 그것을 userInfo 라는 useState에 계속해서 업데이트 시켜주는 구조이다. 그리고 그 userInfo를 매개변수로 받는 UserProfile 이라는 컴포넌트를 만들어 유저들의 정보를 받아 프로필을 반환해줬다.

![](https://static.blex.me/images/content/2024/5/21/202452111_d5j6nvLE2IwUvIWm7x9I.png)

다음과 같이 버튼을 누를 때마다 랜덤 유저들의 정보와 사진이 리스트에 추가된다.

---
분명히 4년전에는 굉장히 어려웠다고 생각했는데 생각보다 쉽게 해결했다. 영상에서도 공식문서 usage 정도만 참고하면서 진행했어서 나도 그렇게 했는데 생각보다 공식문서가 컴팩트하게 잘 돼있다는 것도 알 수 있었다. 앞으로 무작정 구글링을 하기 보다는 공식문서부터 차근차근 살펴봐야 겠다는 생각이 들었다.