Happy things are always here! ꔷ̑◡ꔷ̑

리액트에서 자바스크립트 메소드인 fetch()를 사용해 resful API를 구현해볼텐데요, fetch의 사용법은 다음과 같습니다. fetch(url, {options}) //url: api 통신을 위해 접근할 url //options: 매개변수, method를 지정 options에는 request (요청), response(응답)의 인터페이스가 들어갑니다. request - method method는 우리가 알고 있는 HTTP method가 들어가는데요, 다음의 형식을 따릅니다. C : POST R : GET U : PUT D: DELETE - header header에는 request header를 지정해줍니다. ex) "Content-Type": "application/json" - body bod..

오늘은 리액트 라우터를 구현해보겠습니다. 원래라면 버튼 클릭 시 새로운 페이지로 넘어가도록 구현하기 위해 a 태그를 사용했는데요, react-router-dom을 통해 리액트에서는 어떻게 라우터를 구현하는지 알아봅시다⭐ 우선 react-router-dom를 설치해야 합니다. 터미널을 열고 다음의 명령어를 입력해주세요. npm install react-router-dom 그럼 최신 버전인 V5가 다운로드 됩니다. 간혹 V5 버전을 사용해야 하는 경우가 있는데요, 그럴 때는 다운그레이드 하시면 됩니다. npm uninstall react-router-dom //V6 삭제 npm install react-router-dom@5.2.0 //V5 설치 Go to Sub page를 클릭 시 Sub.js로, Go t..

useState는 함수를 다시 실행해주는 역할을 하여 변경된 값이 html에 자동으로 반영되도록 합니다. 다시 말해 변경해주어야 하는 부분은 변수가 아닌 state에 담으면 됩니다! 예를 들면, 버튼을 클릭 시 값을 변경하려고 할 때 useState를 사용합니다. useState를 사용하는 방법은 1. 상단에 useState를 import 한다. 2. 필요한 컴포넌트 함수 안에서 아래와 같이 useState를 선언한다. let [mode, setMode] = useState("Welcome"); //destructing 문법 //배열도 가능 let [text, setText] = useState(["Hi", "I'm", "Olly"]); text[0] // Hi 3. useState의 0번째 값: 상태의..

(생활코딩님의 강의를 참고했습니다😙) props은 웹페이지의 내용을 동적으로 보여주기 위해 사용됩니다. props을 쓰는 방법은 1. 함수에 파라미터를 넣어줌 2. 아래와 같이 컴포넌트에 props을 추가함 //1 function Header(props){} //2 이벤트를 등록하는 방법은 1. 컴포넌트에 props으로 onChangeMode(함수)를 넣어줌 2. 함수에서 태그에 onClick={()=>props.onChangeMode()} 넣어줌 //1 alert("Success!")}> //2 { e.preventDefault(); props.onChangeMode(); }} > {props.title} Test.js import React from "react"; import "./App.css";..

React의 JSX 기본 문법을 정리해보았습니다. (코딩애플님의 강의를 참조했습니다💕) app.js import "./App.css"; function App() { return ( Hello, World! ); } 위의 코드는 html 처럼 보이지만 사실 html이 아닙니다 !! 자바스크립트 안에서 html 대용으로 쓰기 위한 JSX인데요, 대표적인 문법이 3가지라고 합니다. 1. classname html에서는 이렇게 썼던 것이 JSX에서는 className으로 쓰입니다. 그 이유는 이것이 js 파일이기 때문인데요, 자바스크립트에서는 class는 객체를 생성하기 위한 키워드로 예약되어 있죠! 그래서 Class를 대신해 ClassName으로 쓰고 있습니다. CSS에서도 class와 동일하게 사용할 수 ..

리액트 공부를 미루고 미루다가 5월 목표로 세우고 시작해보았습니다. 우선 리액트를 사용하기 위해 환경을 구축해야 하는데요, 아래 방법을 따르시면 됩니다. 먼저, node.js가 없으신 분들은 다운 받아주세요. 버전이 두개가 있는데 아무거나 다운받으셔도 무방합니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다음은 원하는 위치에 폴더를 하나 만들어주세요. 저는 react-app이라는 이름의 폴더를 하나 만들었습니다. 비주얼 스튜디오 코드에서 폴더를 열어주세요. 터미널 창을 켜서 다음 명령어를 입력합니다. npx create-react-app . ..