프론트엔드/리액트 (9) 썸네일형 리스트형 리액트 꿀팁 메모메모 보호되어 있는 글입니다. [리액트] 실습 - 함수형 컴포넌트에서 데이터 통신하기 간단한 클래스형->함수형 리팩토링은 했는데 서버쪽 세팅이 늦어지고 있어서 함수형 컴포넌트에서 데이터 통신을 해보는 실습을 못 하고 있었음. 그러다 좋은 강좌를 발견해서 공부한 내용을 정리한다. www.youtube.com/watch?v=DtLhiMxgsm0 목표는 1. hook 사용하기 2. API 통신하기 [1차] 영상에서 다룬 부분만 완료해봤다. uesEffect 훅에서 API 통신을 하고, 데이터를 파싱해서 각각의 state를 세팅한 뒤 차트를 그려주고 끝. [내용정리] 1. UseEffect란? 결론부터 말하자면 함수형 컴포넌트에서 사용되는 hook의 일종이다. 기존의 클래스형 컴포넌트가 가지던 라이프사이클들 (mount, update, unmount) 과 같은 목적으로 탄생했다. 리액트 공식 문.. [리액트] 초기세팅 및 실습 5차 [참고] 상세 실습 내용은 노션 프론트 페이지 실습란 참고 1. router 독립적으로 사용하기 - 라우터 재사용성, 컴포넌트간 독립성 높이기 1) router.js 파일 분리해 모듈화하기 import Home from 'src/components/pages/Home'; import List from 'src/components/pages/List'; import MyPage from 'src/components/pages/MyPage'; import Login from 'src/components/pages/Login'; import NotFound from "src/components/pages/NotFound"; import Main from 'src/components/pages/Main'; im.. [리액트] 초기세팅 및 실습 4차 [참고] 상세 실습 내용은 노션 프론트 페이지 실습란 참고 1. react-router-dom 도큐먼트 reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 2. 생활코딩 - 리액트 라우터 youtu.be/WLdbsl9UwDc 3. Minjun Kim -리액트 라우터 v4 강의 사용법 알아보기 youtu.be/o6j8zi5mFIg 4. gradient css cssgradient.io/ [결과물] 코드 : github.com/GoldK11/React/tree/main/practice/simplePage GoldK11/React Reac.. [리액트] 초기세팅 및 실습 3차 [참고] 프론트 실습 - 네이버 오픈 API를 이용해 영화 목록 페이지 만들기 상세 실습 내용은 노션 프론트 페이지 실습란 참고 [결과물] 화면 더보기 코드 : github.com/GoldK11/React/tree/main/practice/simplePage GoldK11/React React self-study . Contribute to GoldK11/React development by creating an account on GitHub. github.com [실습목표] 리액트 컴포넌트 설계 및 라이프사이클에 익숙해지기 오픈 API로 데이터 통신해와서 화면에 뿌리기 라이브러리 연동해서 사용해보기 [컴포넌트 구조 설계] - 디자인 패턴은 아직 고려하지 않음(모델, 뷰, 컨트롤러 등을 분리하지 않음).. [리액트] 초기세팅 및 실습 2차 [참고] 문서 - 리액트로 생각하기 ko.reactjs.org/docs/thinking-in-react.html React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 분리해서 데이터 흐름 실습하기 코드 : github.com/GoldK11/React/tree/main/practice/componentTest [npm npx] npm 영구 설치 npx 임시로 설치하고 지움 (공간 낭비x, 최신버전) [리액트 라이프사이클] [디자인 패턴에 대한 고찰] MVC MVP MVVM Flux - 이 패턴이 곧 리덕스 사용을 요함... [props와 state 관리] - props는 부모가 자식에게 (단방향) -.. [리액트] 클래스형 컴포넌트와 함수형 컴포넌트 보호되어 있는 글입니다. [리액트] 초기세팅 및 실습 1차 [참고] 자습서 - React 시작하기 ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트로 tic tac toe 만들면서 실습해보기 코드 : github.com/GoldK11/React/tree/main/practice/tictactoe [자동 새로고침] 리액트는 코드 변경 후 저장 시 live-reload 기능을 지원한다. 이런 자동 새로고침이 불편해서 비활성화하는 법을 알아봄 okky.kr/article/546683 OKKY | React live-reload 비활성화하는 방법이 궁금합니다. react 에서 소스코드 수.. 이전 1 2 다음
