Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다. Redux를 설치하면 JS 파일 하나에 state를 보관할 수 있는데, 이걸 모든 컴포넌트가 직접 꺼내 쓸 수 있다. 그래서 props 문법이 필요없어진다. 출처 : 코딩애플 설치하기 https://ko.redux.js.org/introduction/g...

Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. XMLHttpRequest 라는 옜날 문법 쓰기 fetch() 라는 최신 문법 쓰기 axios 같은 외부 라이브러리 쓰기 ...

Component의 인생 Component는 Lifecycle이라는 개념이 있다. 이 Lifecycle에 맞춰 코드를 실행할 수 있다. 생성 mount 재 렌더링 update 삭제 unmount 출처 : 코딩애플 Component 인생에 간섭하는 법 Detail 컴포넌트 등장 전에 이것좀 해줘 Detail 컴포넌트 사라...

URL parameter react-router-dom URL parameter를 이용하면 URL에 입력한 파라미터 값을 가져올 수 있다. 상품페이지 3개를 만든다고 생각해보자. 아래와 같이 Route를 3개 만드는 방법을 쓸 수 있다. 하지만 상품이 100만개라면..? <Route path="/detail/0" element={ <De...

/detail 로 접속하면 상세페이지를, /cart 로 접속하면 장바구니 페이지를 보여주자. 1. React에서 페이지를 나누는 방법 컴포넌트를 만들어서 상세페이지 내용을 만든다. /detail 로 접속하면 그 컴포넌트를 보여준다. React-router-dom 라이브러리로 쉽게 구현할 수 있다. 2. React-router-dom...

React 에서 이미지 파일 사용하기 JSX에서 src폴더 내의 이미지를 사용하려면 상단에서 미리 import 해야 한다. public 폴더 내의 자료들은 절대경로로 자유롭게 사용할 수 있다. CSS 내에서 사용할때는 기존처럼 JSX 안에서 src 폴더의 이미지 사용 미리 import 해야 한다 import bg from './bg.p...

React-Bootstrap 라이브러리 https://react-bootstrap.github.io/ React-Bootstrap을 사용하면 HTML CSS로 직접 디자인하지 않고, 예제코드를 복사/붙여넣기 하여 레이아웃을 쉽게 생성할 수 있다. 설치 1. npm 명령어 각종 라이브러리들은 해당 라이브러리 공식 홈페이지에서 사용방법을 보고 설치하...

build는 왜해? 우리가 만든 react 프로젝트를 웹에 배포하려면 build용 파일을 생성 후 그걸 웹에 올려야 한다. 왜냐면, 브라우저는 HTML, CSS, JS 3개의 언어만 해석할 수 있다. 리액트의 이상한 state, JSX 같은 문법은 해석할 수 없다. 그래서 react 프로젝트 build라는걸 하게 되면 브라우저 친화적인 HTML,...

Component 만드는 또 다른 문법 class 현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다. 그냥 알아두자 class 에 component 이름을 작명한다. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것) render return () ...

state와 onChange 함수를 활용해 사용자가 input에 입력 한 값을 바로 가져올 수 있다. react에서는 HTML을 직접 만질 필요가 없다. state를 변경하면 바로 반영되기 때문! function App (){ let [text, setText] = useState(''); return ( <div> ...