반응형 Front-end/React7 [React] history 사용하여 component 이동시, 화면은 바뀌지 않고 url만 변경될 때 해결법 현재 쇼핑몰을 만들고 있는데 문제가 생겼다. Header 부분에 있는 제품 카테고리를 선택하면, 그에 맞는 제품 렌더링 되어야 하는데.... url 만 변경되고 제품 리스트는 그대로 있는 것이 아닌가!.. 그래서 부랴부랴 구글에 검색해보니까 나와 유사한 상황이 많았다. 수정한 코드 1. Route 변경 [변경전 코드] 변경전에는 Route로 하드코딩을 다 박아뒀었다. (얼마나 무식한 방법이었던가 T_T) url로 parameter를 변경하기 위해서 다음과 같이 했었는데.. 해당 코드를 다음과 같이 바꾸었다. // App.js // =============== 변경전 코드 =============== [변경후 코드] // App.js // =============== 변경후 코드 ==============.. 2022. 4. 7. [React] Functional Component 외부 함수 vs 내부 함수 코드를 짜다가 문득 궁금한게 생겼다. import React from 'react'; const ex1() {}// component 외부 함수 export default function Join() { const ex2() {}// component 내부 함수 return( ) } 하나의 컴포넌트안에서 함수를 쓸 수 있는 방법이 두 가지가 있는데, 하나는 외부에서 정의하는 것이고 또 다른 하나는 컴포넌트 내부에서 정의하는 것이다. 아직 리액트에 대한 기초가 부족한터라 혹시나 두 가지 차이점이 있나 찾아봤는데 결론은... 차이점이 없다. 단순히 가독성을 위해서 다르게 쓰일 수 있다고 한다. 참고 사이트 * React 컴포넌트 외부 vs 내부에 변수 및 함수 정의 차이 https://velog.io/@ad.. 2022. 4. 4. [React] Bind는 대체 무엇이며, 언제 사용하는가 React 문서를 읽다가 bind 메서드를 발견했다. class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this);// ?????? } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this.state.isToggleOn ? 'ON' : 'OFF'} ); } } bind 메.. 2022. 3. 17. [React] State 활용 방법 React에서는 데이터를 저장하는 방법이 2가지가 있다. 첫 번째는 변수에 넣는 것이고, 두 번째 방법은 state에 넣는 것이다. State를 사용하는 이유는 데이터가 수정될 때 새로고침을 하지 않아도 자동으로 재렌더링 되기 때문에 사용한다. 활용 방법 import React, { useState } from 'react'; function App() { let [a, b] = useState('banana');// ES6 destructuring---- (1) let [count, countUp] = useState(0);//---- (2) return ( {a} { countUp(count + 1)}}> count: {count} ) } (1) useState('banana')라고 선언하게 되면, .. 2021. 10. 24. [React] 유용한 사이트 모음 잘 활용하기도 장점 처음으로 react로 사이트를 만들려고 하니 욕심이 나서, 처음부터 끝까지 내가 다 직접 만들어봐야겠다란 생각을 했었다. 하지만 react는 커녕 홈페이지 만드는 것도 익숙하지 않은 내가 그렇게 도전을 한다면 꽤 긴 시간이 걸릴 것 같았다. 그래서 유용한 도구들을 활용해서 쓰고자 이렇게 정리했다. Framer Motion https://www.framer.com/motion/ Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 각종 다양한 motion들을 쉽게 테스트 해보고.. 2021. 10. 7. [React&Node] React, Node 연동 및 동시에 실행하기 React와 Node 연동하기 React와 Node 연동하기 위해 다음 블로그 글을 참고했다. 여러 블로그글을 봤지만 해당 블로그가 제일 간단하고 쉽게 되어있기때문에 그대로 링크를 첨부했다. https://hello-bryan.tistory.com/121 React + express 연동설정. 처음부터 따라하기 React, Express 연동하여 사용하기 일단 react app 을 하나 생성합니다. 이름은 cs-test cmd 로 프로젝트를 생성할 폴더로 가서 npx create-react-app cs-test # 설치 다되면 # 폴더로 이동해서 cd cs-test #npm.. hello-bryan.tistory.com React와 Node 동시에 실행하기 위 블로그를 따라서 React와 Node를 쉽게.. 2021. 9. 9. 이전 1 2 다음
