KDT5_송홍빈_2차과제(re-open) #76
Conversation
|
홍빈님 첫 번째 리액트 프로젝트 하시느라 고생 많으셨습니다. 만약에 조금더 공부해야할 시간이 있으시다면 BrowserRouter, Routes, Route 다루는 법 등을 공부하시면 다음 프로젝트때 더욱 효율적인 코딩을 하시는데 도움을 줄거 같네요 정말 고생 많으셨습니다! |
| } | ||
| return ( | ||
| <> | ||
| <TheHeader /> |
There was a problem hiding this comment.
라우터 지금도 잘 써주셨는데요! 라우터를 더 간결하게 쓰려면
Header나 Footer같이 페이지 구분없이 고정되는 컴포넌트는 최상위 폴더 (라우터 렌더링되는 곳 밖에) 구현하면 한번 선언으로
다시 선언하지 않아도 됩니다.
직관적이고 간편하게 구현하려면 router-dom-v6 버전의 BrowserRouter, Routes, Route를 이용하면 간편하게 구현 가능합니다.
| {blankArray.map(movie => ( | ||
| <Movie key={movie.imdbID}> | ||
| <div className="flip"> | ||
| <div className="card"> | ||
| <BlankFront>{movie}</BlankFront> | ||
| <Back> | ||
| <MovieYear>{movie.Year}</MovieYear> | ||
| <MovieTitle>{movie.Title}</MovieTitle> | ||
| </Back> | ||
| </div> | ||
| </div> | ||
| </Movie> | ||
| ))} | ||
| </MovieContainer> | ||
| )} | ||
| </> |
There was a problem hiding this comment.
독특한 UI 신박했습니다!
그런데 UI 측면에서 봤을 때 검색하기전에 '검색결과가 없습니다'라는 UI가 보이면 좀 어색할 수 있을거 같네요
초기화면, 검색결과 없는 화면, 검색 결과 화면 이렇게 세 개로 조건부 렌더링하면 더 좋은 Ui를 경험하게 해줄 수 있을거같습니다!
| const Movie = styled.div` | ||
| display: grid; | ||
| justify-content: center; | ||
| align-items: center; | ||
| ` | ||
| const Front = styled.img` | ||
| &:hover { | ||
| color: red; | ||
| } | ||
| cursor: pointer; | ||
| border: solid; | ||
| border-radius: 10px; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 10px; | ||
| backface-visibility: hidden; | ||
| background: red; | ||
| ` |
There was a problem hiding this comment.
styled-components를 이용해 스타일링을 프로젝트에 적용/시도 해보는 모습이 정말 좋았습니다!
아마 시간상 CSS에 시간을 쓰지 못한 부분이 있으셨을거 같습니다 첫 프로젝트이고 하니
그래도 팁을 하나 드리자면
styled-components에서 태그를 만들어 쓸 때 재사용성이 많은 것들은 태그를 직접 만드는 것이 더 효율적이나
하위에 속할만한 간단한 것들은 중첩 코드안에 태그 그 자체로 쓰고 스타일링 해주는게 좀더 좋을 수 있습니다!
| font-size: 50px; | ||
| ` | ||
| export default function Movie() { | ||
| const [movie, setMovie] = useState({}) |
There was a problem hiding this comment.
api를 불러올때 통상적으로 받아오는 데이터 형태는 여러 객체를 가진 배열이므로
useState의 초기값은 빈 객체 '[]'로 설정하는 것이 좀더 명확해질것 같습니다!
| useEffect(() => { | ||
| ;(async () => { | ||
| setMovie(await fetchDetailMovie()) | ||
| })() | ||
| }, []) |
There was a problem hiding this comment.
리액트 생명주기를 사용해해서 렌더링시 한 번만 호출되는 비동기 api 함수는 굉장히 아름답고 리액트스러운 것 같습니다
| const [inputText, setInputText] = useState('') | ||
| async function getMovie(e) { | ||
| setInputText(e.target.value) | ||
|
|
||
| if (inputText.trim() === '') return | ||
| const movieList = await fetchMovies(inputText) | ||
| handleMovieState(movieList) | ||
| } |
There was a problem hiding this comment.
영화 검색 결과를 받아오는 데이터는 context API나 redux와 같은 전역적 state 관리 라이브러리가 없으면 api 호출 중복을 막기 위해 또는
다른 컴포넌트와 데이터를 주고 받기 용이하게 하기위해 되도록 상단 컴포넌트에서 구현해서 props로 넘겨줄 수 있게 구현하는 것이 좀더 효율적일 수 있습니다!
| onFocus={e => { | ||
| e.target.placeholder = '' | ||
| }} | ||
| onBlur={e => { | ||
| e.target.placeholder = '영화를 검색하세요' | ||
| }} |
There was a problem hiding this comment.
onFocus와 onBlur을 사용하신 것은 꽤나 인상적입니다!
| <Container> | ||
| <Title>About Something..</Title> | ||
| </Container> |
There was a problem hiding this comment.
이렇게 중복되는 스타일은 스타일드 컴포넌트로만 만들기보다
아토믹한 컴포넌트로 만들어보는 것도 좋은 시도입니다!
Container 컴포넌트를 함수형 jsx로 구현후 그 컴포넌트에 지금의 Container 스타일링을 주고
props로 뚫어놓고 재사용이 용이하게 만드는게 정말 편하더라고요!
스타일드 컴포넌트로 시도해보신거는 정말 좋은 모습이신거 같아요 대부분 SCSS를 쓰셨거든요!
프로젝트 개요
배포 주소
이미지
Movie Search
Movie Detail
구현 내용 (과제 요구사항)
❗ 필수
❔ 선택
아쉬운 점
"avenger" 타이틀을 가지고 있는 영화가 출력 됩니다. useState의 비동기적 특성 때문이라고 추측하고 있습니다. 혹시 어떻게 해결해야 할까요?