반응형 React6 [React, Node, MySQL로 쇼핑몰 만들기] 회원가입 화면 React /* eslint-disable */ // Join.js import React, {useState} from 'react'; import SearchAddressModal from './modal/SearchAddressModal'; import DaumPostcode from 'react-daum-postcode'; function Join() { const [name, setName] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [phone, setPhone] = useState(""); const [id, se.. 2022. 5. 26. [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, Nodejs, MySQL DB 설계도 2022. 2. 17. [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 다음
