react 7

[React] axios 사용하여 서버와 데이터 주고받기

서버에 보통 자료를 요청할 때는 GET, 자료를 생성하거나 업데이트할 때는 POST라고 작성하고 서버의 주소를 함께 적는 것으로 해당 위치에 자료를 가져오거나 업데이트를 진행할 수 있습니다. 이러한 경우 기본적으로는 페이지가 새로고침이 되는데, AJAX는 페이지 전체를 리프레쉬하지 않고, 일부분만을 업데이트할 수 있게 도와줍니다. AJAX를 사용하는 방법은 여러가지가 있는데, 이 글에서는 axios라는 라이브러리를 사용하는 방법에 대하여 설명합니다. #1 설치 npm 사용하기: $ npm install axios yarn 사용하기: $ yarn add axios #2 사용하기 get 요청은... axios.get('URL주소')형식으로 작성하고, .then에는 데이터 요청 성공 시 수행할 코드, .cat..

[React] 라우터 사용방법 (react-router-dom@v6)

#1 설치와 세팅 설치 터미널을 열고 아래 방식 중 원하는 방식으로 설치 npm 설치 $ npm install react-router-dom@6 yarn 설치 $ yarn add react-router-dom@6 세팅 index.js 파일을 열어 브라우저 상단에 BrowserRouter를 import 하고, 를 로 감싸 주면 이제 앱 어디에서나 React Router를 사용할 수 있게 됩니다. import { BrowserRouter } from 'react-router-dom'; ... #2 기본 사용법 페이지 나누기 App.js 파일의 상단에 Routes, Route, Link를 import 해옵니다. 페이지가 변경되며 표시될 위치에 컴포넌트를 작성해주고, 안에 를 넣어줍니다. 이 Route가 각각의..

[React] styled-components 설치와 사용 방법

설치 방법 npm install styled-components 터미널을 열어 위 코드를 입력해주면 끝입니다. 공식 페이지의 install 설명에는 --save옵션이 포함되어 있는데, --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미입니다. 모듈이 추가되어 있지 않으면, 파일을 공유하거나 옮길 때 많게는 수백 메가에 달하는 node_moduls 폴더를 함께 옮겨야 하는데, dependency 항목에 모듈이 추가되어 있다면, 이 항목을 체크하면서 자동으로 관련된 모듈을 다운로드합니다. 하지만 현제 release 되는 버전들은 --save 옵션이 기본 적용되어 있어 --save를 사용하지 않아도 자동으로 추가됩니다. 사용 방법 가져오기 (import) import..

[React] useEffect와 생명주기 메소드(Lifecycle Methods) 정리

생명주기 메서드 생명주기 메서드(Lifecycle Methods)는 클래스형 컴포넌트에 사용되는데, 컴포넌트가 브라우저에 ① 나타나고, ② 업데이트되고, ③ 사라지게 될 때 작동되는 메서드입니다. 이렇게 태어나고(생성) 사라지게 될 때까지의 컴포넌트의 인생을 Lifecycle이라 표현하는 것인데, 사용 방법은 대략 아래와 같습니다. class Lifecycle extends React.Component { componentDidMount(){ // 컴포넌트가 Mount될 때 실행될 코드 } componentDidUpdate(){ // 컴포넌트가 Update될 때 실행될 코드 } componentWillUnmount(){ // 컴포넌트가 unmount될 때 실행될 코드 } } useEffect 라이프사이클..

React 스타일 적용하는 방법

#1 css파일에서 수정하기위해 클래스를 적용하는 방법 카멜케이스 방식으로 작성하는 className으로 class지정. * 자바스크립트 기반이기때문에 class는 이미 다른용도로 사용되고 있기 때문 (App.jsx) Title #2 인라인 방식으로 스타일 지정하는 방법 style={ { 속성명 : '속성값' } } 형식으로 사용합니다. {} 안에 {}자료형 으로 넣기 때문에 2번 사용됩니다. 여러가지 속성을 사용할때는 ,로 함께 지정할 수 있으며, font-size, background-color 같이 하이픈(-)이 있는 속성들은 -을 빼고 단어들을 붙여 카멜 케이스 형식으로 작성합니다. (App.jsx) Title

React 이미지를 넣는 방법

#1 src 폴더에 파일이 있을 경우 1) css에 background로 적용하는 방법 일반적인 css 적용 방법과 동일. (App.css) .logo { background-image : url('./logo.png'); } 2) html 내부에서 적용하는 방법 import [이름] from [경로]를 적은 후, 이미지를 삽입하고 싶은 위치에 img src = {} 태그를 사용 (App.js) import logo from './logo.png' function App(){ return ( ) } #2 public 폴더에 파일이 있는 경우 그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다. 하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 ..

[React] 리액트 설치하기

리액트를 시작하기 위하여 Node.js와 React를 설치하는 방법. 그리고 기본적인 파일들의 설명을 정리해 보았습니다. #1 Node.js 설치하기 다음 사이트로 이동하여 Node.js를 설치합니다 링크 : https://nodejs.org/en/ 왼쪽은 많은 사람들이 사용하고 있어 신뢰할 수 있는 안정성을 가진 버전, 오른쪽은 최신 버전입니다. (그냥 최신버전 받으시면 됩니다) ※ Node.js는 라이브러리를 설치하기 쉽게 도와주는 툴 #2 Visual Studio Code 설치 다음 사이트로 이동하여 Visual Studio Code를 설치합니다 링크 : https://code.visualstudio.com/ 1) 작업 폴더 생성 원하는 위치에 리액트를 사용하기 위한 폴더를 생성합니다. 2) 작업 ..

반응형