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. 이전 1 2 다음
