본문 바로가기

JavaScript

 (22)
10. React Hooks Api 오늘은 React Hooks Api 에 대해 알아보겠습니다. Functional Component를 제어하는데 사용할 수 있습니다. 자주 쓰이는 종류로는 useEffect : Component의 생명주기를 설정할 수 있는 Hooks입니다. useState : React State를 정의할 수 있는 Hooks입니다. useCallback: React에 memoization으로 저장된 콜백을 반환합니다. useMemo: React에 memoization으로 저장된 값을 반환합니다. useRef: DOM의 ref 객체를 반환합니다. 이렇게 있습니다. useEffect 이 Hooks 를 사용하면 함수형 Component 에서 side effect를 수행할 수 있습니다. const Test = () => { us..
9. React Event 하루만에 몇개의 글을 작성하는건지 모르겠지만 또다시 돌아온 효그니에요! 오늘은 React의 이벤트 핸들링에 대해 알아볼겁니다. Button, Input, Select 등, 사용자의 입력이 들어가는 여러 이벤트에 대해 알아볼겁니다. 사용자 입력 → 이벤트 발생 → 핸들링 → 데이터 처리 → React 렌더링 의 순서대로 진행됩니다. onClick = { () => { 실행 함수 구문 } } onClick 메소드입니다. 프레그먼트 ( ) 를 제외하고 거의 모든 태그에 삽입할 수 있습니다. 인자 값으로는 Event 객체가 들어갑니다. onClick = { e => { } } 사용 방식은 저번에도 다뤘었죠?, alert('클릭!') } /> 이런 식으로 사용합니다. alert('클릭!') } > alert('클..
8. React Axios를 사용한 통신 이번 글은 axios를 사용한 서버 통신에 대해 다루겠습니다. axios? Promise를 사용하는 HTTP 비동기 통신 모듈입니다. npm install axios yarn add axios 로 설치합니다. 사용법 import axios from 'axios' 모듈을 불러옵니다. axios.post('url', {보낼 데이터}).then(()=> { }) axios.get('url').then((res) => { }); 위와 같이 then 을 이용한 콜백을 사용하거나 let result = await axios.get('url') 과 같이 async/await 를 사용하셔도 됩니다. 위에서 Promise를 사용한다고 했었죠? HTTP 코드가 400 / 500 반환 시, reject를 사용하여 에러를 던..
7. React 파일 구조, import / export 다들 반가워요! 효근이에요! 전전차시에 Router도 배웠으니, 간단하게 React의 파일 구조 ( 나누기 )에 대해 알아보겠습니다. 이번 강의에서 상태 관리 라이브러리는 사용하지 않습니다. 폴더 구조는 이와 같습니다. 사용하시는 상태 관리 라이브러리 ( recoil, redux ) 에 따라 구조는 조금씩 달라집니다. 오늘은 위와 같은 구조로 진행하겠습니다. 많은 연구를 통해 보다 자신에게 맞는 구조를 선택하시는 것이 좋습니다! 폴더의 역할에 대하여 차례대로 assets : 에셋, 이미지, font 등의 파일들 common utils : 자주 쓰이는 함수들 axios : axios 설정 ( 서버 통신용. 헤더 설정 등 ) components : 자주 쓰이는 공용 컴포넌트, 페이지 내의 컴포넌트 등 컴포넌..
6. React View, Component 반복, 조건부 랜더링 헤이 에부리바디! 효근이에요! 오늘은 Component 의 반복, 조건부 렌더링과 간단한 To - Do List View를 제작해볼겁니다. 스타일은 css를 사용하여 제작하겠습니다. ToDo 하나의 데이터는 아래 json 데이터를 삽입하겠습니다. { title: '제목', date: '날짜', isDone: false, // 완료 } 제목과 날짜, 완료 체크가 있는 간단한 형태입니다. const data = [ { title: '제목1', date: '2020-09-27', isDone: false, }, { title: '제목2', date: '2020-09-27', isDone: true, }, { title: '제목3', date: '2020-09-27', isDone: false, }, ]; 위의..
5. React Router Wa! 어김없이 돌아온 심효근입니다! 오늘은 주소 마다 페이지를 다르게 렌더링하는 React Router 를 배워볼겁니다. 사용할 모듈은 "React Router Dom" 입니다. npm install react-router-dom 혹은 yarn add react-router-dom 로 사용할 수 있습니다. import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; const App = () => { return ( ); }; const Home = () => { return 홈; }; const About = () => { return 어바웃; }; export default App; 간단하게 Ho..

티스토리툴바