프리노트

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 설치 npm install axios 선언 방법 import axios from 'axios' 사용 방법 기본적으로 사용하는 형태 function App(){ return ( { axios.get('URL') .then((결과)=>{ console.log(결과.data) }) .catch(()=>{ console.log('실패함') }) }}>버튼 ) } GET 요청 서버에서 데이터를 가져와서 보여준다거나 하는 용도이다. GET메서드는 값이나 상태등을 바꿀 수 없다. axios.get('URL') POST 요청 로그인, 회원가입 ..

Developer/React 2022. 12. 18. 11:40

각각의 컴포넌트에는 라이프 사이클 즉, 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지가 사라질때 끝이난다. 라이프사이클의 분류 크게 세가지 유형으로 나눌 수 있다 마운트 (생성 될때) 업데이트 (업데이트 할때) 언마운트 (제거 할때) 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. 언마운트는 DOM에서 제거되는것을 뜻한다. 업데이트는 다음과 같은 4가지 상황에서 발생한다. props가 바뀔 때 state가 바귈 때 부모 컴포넌트가 리렌더링 될때 this.forceUpdate로 강제로 렌더링을 트리거할 때 라이프 사이클 메서드 1.constructor(생성자) 이것을 자바와 마찬가지로 컴포넌트를 만들 때 처음으로 실행된다. 이 메..

Developer/React 2022. 12. 2. 12:06

비구조화 할당이란 디스트럭처링은 비구조화 할당/구조분해 할당 이라고도 한다. 배열[]이나 객체{}의 값을 개별로 변수에 담을 수 있게하는 표현식(expression) 기본문법(배열) [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(a1,a2); // 1 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] console.log([a1,a2,rest_a]); // [1, 2, Array(7)] //전개 연산자 이후 변수 입력 / 다른 속성일 경우 에러 발생 //[a1, a2, ...rest_a, a3] = [1, 2, 3, 4, 5,..

Developer/React 2022. 11. 23. 18:09

일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다. 1.선언방법 React 모듈에서 {useState}를 불러오고 useState()를 선언해서 사용하면 된다. import { useState } from 'react'; let [글제목, 변경글제목] = useState('남자 코트 추천'); let [글제목, 변경글제목] = useState(초기값 생략 가능); 2.데이터 변경 방법 state 변경함수는 ()안에 넣은걸로 state를 갈아치워주는 함수..

Developer/React 2022. 11. 16. 20:01

Props와 State React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용됨. Props 불변의 데이터 부모로부터 전달 받음 변경 불가 State (상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 Props는 부모 컴포넌트로 부터 상속 받는 데이터이며, 데이터를 변경할 수 없음. Props는(함수 매개변수 처럼 ) 컴포넌트에 전달 State는 내부(컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음. State는 (함수 내에 선언된 변수처럼 ) 컴포넌트 안에서 관리 참고 사이트 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org [React] Pr..

Developer/React 2022. 11. 15. 17:59

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); } 1.반드시 부모 요소 하나 감싸는..

Developer/React 2022. 11. 15. 17:48