react20 [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. [Team project] 🍿MEGAFOX 🎞 - 회고 MEGAFOX 팀 프로젝트 📆 진행 기간 2021.10.18 ~ 2021.10.29 💻 기술 Front-end View : React Build Tool : Create React App Library : react-router-dom Styled Components (with css3, sass) Code Quality Tool : ESLint, Prettier Back-end Python, Django, MySQL Infrastructure : AWS 🖇 사용 협업 툴 VCS : Git & Github Communication : Slack Task Management : Trello 🦊 팀원별 역할 Front-end github 공통 CRA 초기 세팅 강단 header(Nav, 유저 정보 등 확인 .. 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. [Team project] ⚾️BBADDA 💢 - 회고 기존 MLB korea 사이트를 프론트엔드는 React를 백엔드는 Django/Python를 사용해 재구성해보았습니다. BBADDA 팀 프로젝트 📆 진행 기간 2021.10.05 ~ 2021.10.15 💻 기술 Front-end View : React Build Tool : Create React App Library : react-router-dom Code Quality Tool : ESLint, Prettier Sass Back-end Python, Django, MySQL Infrastructure : AWS 🖇 협업 툴 VCS : Git & Github Communication : Slack Task Management : Trello ⚾️ 팀원별 역할 Front-end github 공통 CRA.. 2021. 10. 18. [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. 이전 1 2 3 다음
