Study/React

[React_study] Ajax (서버와 통신)

* AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다. AJAX로 GET/POST요청하려면 방법 XMLHttpRequest fetch() axios라이브러리 사용 * axios라이브러리 설치 npm install axios * AJAX요청하는 법 (참고) react에선 거의 서버와 ajax를 이용해서 통신을 한다. import axios from 'axios' function App(){ return ( { axios.get('url정보 넣기').then((result)=>{ console.log(result.data) }) .catch(()=>{ console.log('error') }) }}>button ) } ..

[React_study] useEffect (실행조건 & clean up function)

* useEffect에 넣을 수 있는 실행조건 ( [ ] ) [ ] : useEffect에 실행조건을 넣을 수 있는곳 원래 실행조건을 넣지 않으면 mount, update시 실행된다. 실행조건을 추가하게되면 실행조건의 state가 변할 때만 실행이 된다. useEffect(()=>{ console.log("change") }, [count]) useEffect()의 두번째 파라미터로 [ ] 를 넣을 수 있음 거기에 변수나 state같은 것들을 넣을 수 있음 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다. 위의 예시는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다. (참고) [ ] 안에 state 여러개 넣을 수 있음 (참고) [변수..

[React_study] Lifecycle & useEffect

* Lifecycle - 컴포넌트에는 Lifecycle이라는 개념이 있다. 생성 (mount) 재렌더링(update) 삭제(unmount) 컴포넌트가 Lifecycle을 하게 될 때 특정 코드를 실행할 수 있다 갈고리(hook)을 달아서 코드를 넣어주면 됩니다. 그럼 페이지 장착시, 업데이트시, 제거시 코드실행가능 그래서 저걸 Lifecycle hook 이라고 부릅니다. componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다. * React에서 Lifecycle hook사용법 (예전 버전) class 문법을 이용한 컴포넌트 생성 및 함수명을 작성해주어 특정 Lifecycle에서 코드 실행 class Detail2 extends..

[React_study] styled-components (CSS in JS)

* styled-components - 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생긴다. class를 만들고 까먹거나 중복해서 만든경우 갑자기 다른 컴포넌트에 원하지 않는 스타일이 적용되거나 CSS 파일이 너무 길어져서 수정이 어렵거게 된다. 이런 경우가 발생 할 수 있다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는 styled-components 라는 라이브러리를 설치하여 이용하면 된다. * styled-components 설치 - 터미널에 아래의 명령어를 입력해주어서 설치한다. npm install styled-components - 사용하고 싶은 컴포넌트 상단에 아래의 명령어처럼 import해준다. import styled from 'styled-components' * ..

[React_study] React Router (setting & routing & Link)

* React Router - 만약 페이지를 나누고 싶다면 일반 html, css, js에서는 그냥 html 파일을 여러개 만들면 된다. 하지만 리액트에서는 html파일을 하나만 사용한다. 그래서 리액트에서는 누가 다른 페이지 요청을 하면 내부에 있는 를 바꿔준뒤 render해주면 된다. react-router-dom이라는 외부 라이브러리를 이용해 구현하는게 일반적이다. * React-router-dom 설치 및 셋팅 방법 아래의 명령어를 이용해 설치 npm install react-router-dom@6 셋팅은 index.js 파일에서 import { BrowserRouter } from "react-router-dom"; 을 이용해 을 감싸주면 된다. import { BrowserRouter } fr..

[React_study] import & export

* export default / import 문법 DB들을 state로 만들고 싶은데 useState()안에 넣기에는 너무 길이가 긴 경우 다른파일에 보관하였다가 import해올 수 있다. * export default / import 예시 코드 - export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있다. - export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'로 작성하면 된다. (유의점) - 변수, 함수, 자료형 전부 export 가능 - 파일마다 export default 라는 키워드는 하나만 사용가능하다. - 파일경로는 ./ 부터 시작해야한다. 현재경로라는 뜻 // data.js 파일 const number = 10; ex..