GDG on Campus Sookmyung

0. AJAX Axios에 대한 이해를 하기 위해서는 먼저 AJAX에 대한 이해가 우선되어야 한다. AJAX란 Asynchronous Javascript And Xml의 약자로, Javascript의 라이브러리의 하나이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여, 페이지 일부만을 위한 데이터를 로드하는 기법으로 Javascript를 사용한 비동기 통신, 서버와 클라이언트 간에 XML 데이터를 주고받는 기술이다. 1. Axios 개요 리액트에서 AJAX를 구현하려면, Javascript의 내장객체인 XMLRequest를 사용하거나, HTTP Client를 사용해야 한다. Axios는 리액트에서 많이 쓰이는 HTTPClient 라이브러리의 하나이다. Axios는 Promise 기반..

목차 React-Bootstrap란? 시작하기 여러 가지 컴포넌트 사용하기 react-bootstrap으로 인프런 사이트 클론 코딩하기 참고 자료 React-Bootstrap 공식 문서 1. react-bootstrap란? 부트스트랩(bootstrap)은 오픈소스 프론트엔드 프레임워크이다. 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 제공하고 있다. 리액트에서 부트스트랩을 사용하는 경로는 react-bootstrap, reactstrap 두 가지가 있는데, 본 스터디에서는 react-bootstrap을 사용한다. react-bootstrap은 기존의 부트스트랩을 리액트 스타일의 컴포넌트로 압축하여 코드가 간단해진다는 장점이 있다. 2...

react-router란? 가장 많이 사용되는 라이브러리 중 하나로, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며 서버 사이드 렌더링을 도와주는 도구들을 제공합니다. react-router은 웹과 앱, react-router-native은 앱에 사용 가능합니다. 오늘 다루는 react-router-dom은 웹에서 사용합니다. react-router-dom 사용하기 터미널에 npm install react-router-dom 명령어를 입력하여 설치가 완료되면 react-router-dom으로부터 BrowserRouter, Route, Switch를 import 합니다. import {BrowserRouter, Route, Switch} from 'react-router-dom'; Browser..

props와 state는 모두 '데이터'를 다룰 때 사용되는 개념입니다. [props란?] properties의 약자 변하지 않는 데이터(Immutable Data) ⇒ 컴포넌트에서 변경 불가능. 컴포넌트로부터 넘겨받은 값 그대로 사용해야함(변경하고 싶다면 컴포넌트 내에서 state를 활용) 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 사용 자식입장에서 읽기 전용 데이터 📝props vs state state ⦁ 변하는 데이터(Mutable Data) ⇒ 동적 데이터를 다룰 때 사용 ⦁ 컴포넌트의 상태를 나타냄 * state가 변경되면 컴포넌트를 다시 렌더링 해야한다. [props 사용방법] 상위 컴포넌트 : 하위컴포넌트 함수형 컴포넌트 : {props_parameter.props_name} 클..

목차 1. Component란? 2. Component 생성하기 3. Component 사용하기 4. props, state 5. setState 6. 생명 주기 참고 자료 리액트 공식 문서 ⭐React의 기본, 컴포넌트를 알아보자⭐ 리액트의 생명 주기 1. Component란? 리액트로 만든 페이지는 컴포넌트들로 구성되어 있다. 개발자는 컴포넌트를 만들어두고 조립하여 사용한다. 컴포넌트를 사용하면 이를 재사용할 수 있고, 유지 보수도 쉬워진다. 아래는 네이버 메일함 UI의 컴포넌트 구성이다. 다음과 같이 컴포넌트를 모듈처럼 사용한다. 2. Component 생성하기 컴포넌트는 일반적으로 두 종류가 있다. 클래스 컴포넌트 혹은 함수형 컴포넌트를 사용할 수 있다. 클래스 컴포넌트 작성 class Subje..

useState란? 함수형의 리액트인 Hook에 속함 함수로 React 16.8 부터 사용 가능하다. 주로 자신 컴포넌트가 유동적으로 변경될 값을 관리할 때 사용한다. useState를 사용하기 위해선 import를 필수로 해주어야한다. import { useState } from "react"; 기본적인 문법은 다음과 같다. function 컴포넌트(props) { const [값변수, 값변경함수] = useState(기본값); const 값변경함수 = () => { //변경될 코드 } return( ); } [useState를 사용하지 않은 예제] import './App.css'; function App() { let title = "이름"; function change() { const newTi..

event 처리 방법 미리 함수 만들어놓고 전달해줌 함수를 만들고 props에 객체로 함수명을 넣는 방법. onClick={}에서 함수명 적을 때 ()을 붙이면 onClick 조건과 상관 없이 바로 함수가 실행되기 때문에 () 없이 함수명만 적어야 함 export default function Hello() { function showName() { console.log("Mike"); } function showText(e) { console.log(e.target.value); } return ( hello Show name ) }​ 내부에 직접 특정 함수 작성 : 매개변수 전달이 편하다는 장점 함수를 위에 미리 정의하지 않고 내부에 직접 작성하는 방법. export default function H..