리액트8 (React) 리액트 라우터 사용하여 고정 메뉴 만들기(react-router v6 2022.4 기준 최신버전) 포스팅 요약 1. 포스팅 이유 2. 결과 영상 3. 소스 다운 4. react-router-dom v6관련 참고하시면 좋은 문서자료 1. 포스팅 이유 아오 리액트 또 업데이트 됐습니다.. 개인 공부하다가 가 안먹길래 찾아보니 , 2021년에 react-router-dom 이 v5에서 v6로 업데이트 되면서 는 없어졌더라구요... 그래서 공부 기록겸 포스팅 하게 되었습니다... 아래 링크는 참고하시면 좋은 블로그입니다. react-router-dom v5에서 v6로 어떤부분이 변경되었는지 알려줍니다. https://velog.io/@soryeongk/ReactRouterDomV6 ** 최대한 좋은 코드를 제공해드리려 노력할게요, 저보다 더 좋은 코드를 짜신다면 공유 환영합니다!! 2. 결과 영상 3.소스 .. 2022. 4. 3. (React) 리액트 useEffect 사용법 (React) 리액트 useEffect 사용법 * 이 포스팅은 "리액트를 다루는 기술"책 & 생활코딩님의 강의를 보고 복습겸 정리한 포스팅 입니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하지만, 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없습니다. 그대신 Hook을 사용합니다. 많은 Hook들이 있지만 그 중 useEffect에 대해 정리해 보았습니다. 1) useEffect가 필요한 이유 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을 시 useEffect를 사용할 수 있습니다. 2) useEffect란? 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것... 2021. 8. 23. (내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 (내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 제가봤던 모든 교과서(?)중에 구성이 제일 잘되어 있습니다. 앞에는 이해할만 했는데 뒤에 가서는 너무 어려워서 이해가 잘안갔어요 ㅠㅠ 아직 한번 밖에 못봤지만, 작은 프로젝트들 진행하면서 복습해봐야 겠네요!! 리액트를 다루는 기술을 읽기 전에... 1자바스크립트에 대한 이해도가 높아졌을때 보시는거 추천드립니다!! (HTML, CSS는 당연히 알아야 됩니다 !!) 책 전체적인 구성 이론 -> 앞에 설명한 이론을 토대로 실습진행 -> 실습한 내용의 코드 개선 *이론 부분에서 포함된 내용: 1) 기본적인 리액트의 이론과 원리 2) 리덕스, 미들웨어, Koa, 코드 스플리팅, 비동기 로딩, SSR과 같은 대규모 프로젝트를 위한 이론과 원리 좋았던 점... 2021. 8. 21. (React) 리액트 useState 사용해서 계산기 프로그램 만들기 (React) 리액트 useState 사용해서 계산기 프로그램 만들기 * 아직 코드에 주석 설명을 달지 않았습니다. 계산기 하나 만드는데 이렇게 어려운가.....?! 엄청 간단한줄 알았는데... 몇시간이나 걸렸다 ㅇㄴ.... 계산기를 눌렀을때, 복잡한 사칙 연산 까지 가능한 계산기를 구현 하기 위해 머리를 잔뜩 굴렸다. 분명 더 간단하게 하는 방식이 있겠지만, 리액트 초보자인 나로서는 아래 풀이 방법이 최선이다... ㅠ_ㅠ 혹시 계산기를 만드는 더 좋은 방법이 있다면 꼭 코드 공유해주세요.... ㅠㅠㅠㅠ... 1. 복잡한 사칙연산 가능 2. 일의 자릿수 이상 자릿수의 계산 가능 3. 기호는 먼저 클릭한 것부터 계산. (ex. 13+17*2 => 13+17=30, 30*2=60) 어려웠던 점 예를들면 (1.. 2021. 8. 20. (React) 리액트 props, 컴포넌트에게 값 전달하기 (React) 리액트 props, 컴포넌트에게 값 전달하기 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 1. App에서 Props값 지정 *App컴포넌트에서 값을 지정하는 경우입니다. App.js import React from "react"; import Component from "./Component"; const App = () => { return ; }; export default App; Component.js import React from "react"; const Component = (props) => { return 안녕하세요, 제 이름은 {props.na.. 2021. 8. 18. (React)리액트 : 함수형 컴포넌트 VS 클래스형 컴포넌트 (React)리액트 : 함수형 컴포넌트와 클래스형 컴포넌트에 대해서 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 함수형 컴포넌스 VS 클래스형 컴포넌스 함수형 컴포넌트 클래스형 컴포넌트 state X O 라이프사이클 X O Hook O X 장점 1. 클래스형 컴포넌트보다 선언하기 편함 2. 메모리 자원이 클래스형 컴포넌트보다 덜 사용함. 3. 파일크기가 클래스형보다 더 작음 ... 간편한 코드 생성 단축키 에디터에서 rsc 입력 후, Tab누르기 에디터에서 rcc 입력 후, Tab누르기 코드 형식 import React from 'react'; const TodosContain.. 2021. 8. 18. 이전 1 2 다음
