해바라기찬

일단 js 화살표 문법중 () => { return { a: 1 }; } () => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다. setState( () => ({}) ) setState( () => { return {} }) //두개가 동일 setState( (prevState) => ({...prevState,}) ) setState( (prevState) => { return {...prevState,} }) //두개가 동일 setState( 이 안에 return 값이 들어감) // 결국 state가 return 값으로 변경

Import 가장 기본이 되는 방법으로 Component에서 css파일을 바로 import // App.js import "styles.css"; const App = () => { return( ... ); } 가장 간단한 방법이기 때문에 적용하기는 쉽지만, 그만한 단점이 존재한다. 어플리케이션의 규모가 작은 경우에는 큰 영향이 없지만, 규모가 커질수록 컴포넌트가 많아진다. 그렇게 되면 css 파일을 관리하기도 어려워지며, 여러 컴포넌트에서 사용한 Class Name에도 중복이 발생할 수 있다. 그로 인해, A 컴포넌트에서 사용한 클래스 이름을 B 컴포넌트에서도 사용하는 등 원하지 않던 결과가 나올 수 있다는 것이다. Encapsulation 컴포넌트와 해당 컴포넌트에서 사용하는 css 파일을 묶어서 ..

백엔드 포트 : 5000 프런트 엔드 포트 : 3000 프런트엔드 json에 "proxy": "http://localhost:5000"추가하여 통신하려 하는데 npm start후 오류 발생 axios 단에서 직접 주소 추가 CORS정책에 막힘 https://create-react-app.dev/docs/proxying-api-requests-in-development/ Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 최종해결 1. 2.src/setupProxy.js파일 생성 const { cre..

[React] 리액트에서 컴포넌트(component)란? 리액트는 유저 인터페이스 설계를 위한 자바스크립트 라이브러리이다. 리액트를 한 마디로 정의하긴 했지만, 사실 리액트는 그렇게 간단하게 정의내리긴 어렵다. 리액트를 한 줄로 설명할 수 없다면, 리액트를 직접 사용해 보는 것이 무엇인지 정의내리는 것보다 더 의미있을 것이다. 리액트를 사용하면 우리는 컴포넌트를 만들고, 컴포넌트를 보기 좋게 바꾸며, 이 컴포넌트가 데이터를 보여주게 된다. 즉, 리액트에서는 모든 게 컴포넌트이다. 컴포넌트란? (component) 컴포넌트는 html를 반환하는 함수이며, 재사용하기 편한 UI 조각이다. 컴포넌트의 기본 형식은 아래와 같다. 또는 컴포넌트는 항상 대문자로 시작해야 하고, 위와 같은 태그 형식을 Self Cl..