D.evelop/React17 [React-Router]리액트 라우터 v5 → v6 (useHistory → useNavigate) 리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야합니다. 공식문서 : https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory (공식문서 링크 변경) 공식문서 : https://reactrouter.com/en/6.21.2/hooks/use-navigate#usenavigate // This is a React Router v5 app import { useHistory } from "react-router-dom"; function App() { let history = useHistory(); return ( {history.push("/main")}}>go home.. 2021. 11. 9. [React]함수형 컴포넌트에서의 this.props.history.push(); MEGAFOX 프로젝트 리팩토링 class 컴포넌트로 작업한 부분을 함수형 컴포넌트로 수정 진행 중. :: class component -> function component 🤓 이 때, onClick 이벤트 시 페이지 이동을 위해 사용했던 함수형은 state 없는데, this.props를 사용할 수 있나요? 컴파일부터 안됩니다. this.props.history.push(경로); 를 더이상 사용할 수 없었다. goToTheater = () => { const { history } = this.props; history.push('/theater/list'); }; react-router v5를 기반으로 설명 합니다. (v6버전 관련 내용 포스팅, 공식문서) [ 해결 ] 함수형에서 push메서드를 사용해.. 2021. 11. 8. [React]fetch함수와 api를 이용한 통신 실습 그 동안 진행한 공부내용을 뒤적거리다 foundation 4주차에 현우님이랑 실습한 통신 코드를 발견했다. 처음으로 백엔드와 통신을 해본 날이었는데, 동휘님, 치훈님과 실습을 마치고 돌아왔던 저녁. 현우님이 front와 더 해보고 싶은 작업이 있다고 하셔서. 그리고 그게 더 재밌을 거라고 어필하셔서🤣 내 작업을 제쳐두고 했던 작업.(그래도 밤새 완성은 했던🥲) 다음 날, 현우님과의 api 통신 작업 부분을 원복하지 못하고 PR을 올렸었는데, 오히려 멘토님이 해당 코드에 대한 코드리뷰를 해주셔서 더 많이 배울 수 있었다. 이 날은 내가 통신해서 결과를 봐야한다고 한다고 현우님을 찾아가 졸라아했다. 이 작업으로 인해, 1, 2차 프로젝트 시 백엔드에서 작업해준 api를 붙일 때 정말 도움이 많이 됐었다. [.. 2021. 11. 1. [React]Link컴포넌트 사용 시 TypeError TypeError: Cannot read properties of undefined (reading 'pathname') ... import { Link, withRouter } from 'react-router-dom'; ... class Search extends Component { ... goToMovie = () => { const { movieTitle } = this.state; const { history } = this.props; if (0 < movieTitle.length) { history.push('/movies'); } else { alert('영화 이름을 입력하세요'); } }; ... render() { return ( ); } } const SearchButton = st.. 2021. 10. 31. [React]map함수 unique "key" prop 에러(Fragment에 속성 적용) Warning: Each child in a list should have a unique "key" prop. React에서 map함수를 사용하는 것에 재미가 들려 여기저기 사용해보던 중. 다음과 같은 코드에서 에러가 지속되었다. index.js:1 Warning: Each child in a list should have a unique "key" prop. {NAV_DATA.map(({ id, name, link, menu }) => { return ( this.setHoverMenu(id)}> {name} {id === hoveredMenuId && } ); })} 이리보고 저리보고 다시 봐도 나는 '각 자식 요소에 유니크한 키 값 key={id}부여하고 있었다. (고 생각했다.) ✅ map 함수.. 2021. 10. 23. [React]라이프사이클 Lifecycle (+unique key prop에러) Lifecycle 리액트 라이프 사이클 (링크) componentDidMount() componentDidMount()까지는 DOM에 없다 componentDidMount()이 선언되는 순간부터 사용할 수 있음 일회용. 한번만 불리고 땡! Re-render의 조건 setState가 업데이트 됐을 때 props가 바꼈을 때 "리렌더"가 된다. 기본 LifeCycle 컴포넌트 생성 시 construct > componentWillMount > render > componentDidMount 순으로 진행 컴포넌트를 제거할 때는 componentWillUnmount 메소드만 실행 컴포넌트의 prop이 변경될 때 componentWillReciveProps > shouldComponentUpdate > compo.. 2021. 10. 6. [React]terminal에서 npm종료 할 때, 단축키 "ctrl + c" React 프로젝트 중에 페이지 확인하느라 터미널에서 npm start 시키다가 수정 후 git으로 commit 할 때 git명령어가 실행 안돼서 당황.... 터미널을 종료했다가 다시 켜서 commit을 하는 걸 4번 정도 했을 때 방법을 찾았다. 구글링 키워드 'npm 종료' terminal에서 npm종료 할 때, 단축키 "ctrl + c" 2021. 9. 27. [React]에러 "Module not found: Can't resolve 파일 in 경로'' React Router 모듈을 추가했다. npm install react-router-dom --save sass 모듈을 추가했다. npm install node-sass@4.14.1 --save 클론 중이던 danstagram의 메인페이지에서 에러가 떴다. Module not found: Can't resolve 'css파일' in 'css파일 경로' ..........(중략).......... [현상] login페이지에서는 css가 읽히는데, main 페이지에서는 읽히지 않았다. login.css를 login페이지에 인클루드하면 적용 됨 main.css를 login페이지에 인클루드하면 적용 됨 main.css를 main페이지에 인클루드하면 적용 안됨 loing.css를 main페이지에 인클루드하면 적.. 2021. 9. 22. 이전 1 2 3 다음
