리액트 class에서 hooks로 변경하기

Question

안녕하세요, 리액트 초보이지만.. 공부하면서 리액트로 영화 예매 사이트를 만들어보고 있습니다.영화관 자리 선택하는 부분을 react-seat-picker를 이용하기 위해 https://www.npmjs.com/package/react-seat-picker 로 들어갔는데, class로 써져있더라구요..저는 function으로 쓰고 있어서.. 다시 바꾸기가 번거로워서 hooks로 바꾸려고 하는데 제가 잘못 바꿨는지 함수 부분이 적용이 되지 않네요..화면에 뜨긴 하는데 좌석을 선택하면 loading부분에서 오류가 나는지 회색으로 바뀌고 update가 되지 않는 것 같습니다. 제가 수정한 부분입니다.const [loading, setLoading] = useState(false); const addSeatCallBackContinousCase = ( { row, number, id }, addCb, params, removeCb ) => { setLoading( { loading: true, }, async () => { if (removeCb) { await new Promise((resolve) => setTimeout(resolve, 750)); console.log( `Removed seat ${params.number}, row ${params.row}, id ${params.id}` ); removeCb(params.row, params.number); } await new Promise((resolve) => setTimeout(resolve, 750)); console.log(`Added seat ${number}, row ${row}, id ${id}`); const newTooltip = `tooltip for id-${id} added by callback`; addCb(row, number, id, newTooltip); setLoading({ loading: false }); } ); }; const removeSeatCallBack = ({ row, number, id }, removeCb) => { setLoading( { loading: true, }, async () => { await new Promise((resolve) => setTimeout(resolve, 1500)); console.log(`Removed seat ${number}, row ${row}, id ${id}`); // A value of null will reset the tooltip to the original while '' will hide the tooltip const newTooltip = ["A", "B", "C"].includes(row) ? null : ""; removeCb(row, number, newTooltip); setLoading({ loading: false }); } ); }; 여기까지만 수정하고 return()에서 사용하였습니다. 아 그리고 혹시 css를 어떻게 수정해야 될까요... 사이즈도 키우고 싶은데 css를 만져봤는데 사이즈가 커지긴 하는데 밀려나서 잘려지는 부분이 생깁니다.

페코옹 · Accepted Answer

클래스 컴포넌트 억지로 수정하지 마시고 상위 컴포넌트에서 props으로 setter 넘겨주시고const [selected, setSeletectd] &#61; useState(null);<MoviePicker setSeletectd&#61;{setSeletectd} /> MoviePicker에 있는 addSeat...나 removeSeat 같은 method 들에서this.props.setSeletect로 접근해서 사용해보세요요런 식으로 addSeatCallback &#61; ({ row, number, id }, addCb) &#61;> { this.setState( { loading: true, }, async () &#61;> { await new Promise((resolve) &#61;> setTimeout(resolve, 1500)); console.log(&#96;Added seat ${number}, row ${row}, id ${id}&#96;); this.props.setSelected(&#96;Added seat ${number}, row ${row}, id ${id}&#96;); const newTooltip &#61; &#96;tooltip for id-${id} added by callback&#96;; addCb(row, number, id, newTooltip); this.setState({ loading: false }); } ); };

페코옹 · Answer

css는 movie 컴포넌트레서import &#34;seat.css&#34;하셔서css 파일에 .seat {원하는 크기}하심 될것 것 같네요.크롬 데브툴 들어가서 css 잘 만져보면서 잘 하시면 됩니다

에그타르트 · Answer

css 부분은 해결됐습니다. 감사합니다.그런데 제가 이 파일을 function으로 작업하고 있었기 때문에 class를 그대로 추가하면 오류가 발생할 것 같습니다..제가 질문 올렸던 코드로 실행시켜 보면, 화면에 뜨긴 하지만 console에 이렇게 오류가 뜹니다. Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect(). Warning: Failed prop type: Invalid prop &#96;loading&#96; of type &#96;object&#96; supplied to &#96;SeatPicker&#96;, expected &#96;boolean&#96;. in SeatPicker (at Seat.js:244) in Unknown (created by Context.Consumer) in Route (at App.js:20) in Switch (at App.js:14) in Router (created by HashRouter) in HashRouter (at App.js:13) in App (at src/index.js:11) in ApolloProvider (at src/index.js:9)

페코옹 · Answer

제가 위에 말씀 드린건 새로 프로젝트따서 돌아가는거 확인 하고 말씀 드린거라서 될거에요.함수형이든 클래스형이든 상관없어요

에그타르트 · Answer

잘 이해가 되지 않는데 이렇게 하는게 맞나요? export default () &#61;> { const [selected, setSelected] &#61; useState(null); const addSeatCallBackContinousCase &#61; ( { row, number, id }, addCb, params, removeCb ) &#61;> { this.setState( { loading: true, }, async () &#61;> { if (removeCb) { await new Promise((resolve) &#61;> setTimeout(resolve, 750)); console.log( &#96;Removed seat ${params.number}, row ${params.row}, id ${params.id}&#96; ); removeCb(params.row, params.number); } await new Promise((resolve) &#61;> setTimeout(resolve, 750)); console.log(&#96;Added seat ${number}, row ${row}, id ${id}&#96;); this.props.setSelected(&#96;Added seat ${number}, row ${row}, id ${id}&#96;); const newTooltip &#61; &#96;tooltip for id-${id} added by callback&#96;; addCb(row, number, id, newTooltip); this.setState({ loading: false }); } ); }; return ( <SeatPicker addSeatCallback&#61;{addSeatCallBackContinousCase} removeSeatCallback&#61;{removeSeatCallBack} rows&#61;{rows} maxReservableSeats&#61;{3} alpha visible selectedByDefault loading&#61;{loading} tooltipProps&#61;{{ multiline: true }} continuous setSelected&#61;{setSelected} /> ); };

페코옹 · Answer

https://codesandbox.io/s/clever-shadow-i9kc0참고 하세유

에그타르트 · Answer

아! 저렇게 하는 방법은 생각하지 못했습니다.. 많이 배워가네요. 감사합니다.

리액트 class에서 hooks로 변경하기

7개의 답변

#react-seat-picker 목록