React

React란? 리액트 : 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리. 리액트의 3가지 특징: 선언형, 컴포넌트 기반, 범용성 (다양한 곳에서 활용 가능) 선언형(Declarative) : 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS

Create React App란 ? 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인. 복잡한 개발 세팅을 해줌. 1) git --version, node --version, npm --version 으로 버전확인2) 경로를 지정해서 mkdir 폴더명 으

src/App.js에 import 된 ./static/dummyData.jsFont Awesome은 자주 사용되는 아이콘을 쉽게 접근할 수 있도록 모아놓은 오픈소스 라이브러리폰트어썸 공식문서username이 'parkhacker'인 것 찾아 css로 보라색 배경색 주기

전통적인 웹사이트 : 페이지 이동시 매번 페이지 전체 로딩. (깜빡인다.)매번 불러오는 것이 서버와의 불필요한 트래픽을 발생. 사용자 입장에서는 더 느린 반응성, 사용자 경험을 제공하기 어렵게 만듬.1990년대 후반: HTML 문서 전체가 아닌, 업데이트에 필요한 데이

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예로 Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요.라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주

State : 변할 수 있는 값. 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값. 컴포넌트 안에서만 지지고 볶고 변화되는 값. 컴포넌트의 State 예시 Props : 외부로부터 전달받은 값. 인자와 같이 위로부터 넘겨 받을 수 있는 것. 컴포넌트의 속성(pr

이중 삼항연산자 : ()괄호 이용

https://velog.io/@yjs3819/as%EB%A5%BC-%ED%86%B5%ED%95%9C-SVG-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%99%95%EC%9E%A5%EC%84%B1-%EB%86%92%EC%9D%B4%

https://velog.io/@wjd489898/ReactURL-%EC%A0%95%EB%B3%B4%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0matchuseParams리액트는 App.js 안에 여러페이지를 연결시켜놓은 컴포넌트 형식의 싱글

onChage함수로 받은 e.target.value를 setState의 값을 변경해줄 때 그리고 그 setState값을 바로 함수에 넣어 실행해주면 이전값으로 함수가 실행된다. 왜냐면 setState는 로딩이 될때 값을 수정하기 때문이다. 그래서 이럴때는 꼼수로 함수안

useEffect({실행내용},값1)'값1'이 바뀔때마다 useEffect 실행내용이 실행된다.'값1'에 상태값이 들어갈때 set값1 을 했을때 값이 같다면 실행내용이 실행되지 않는다. 즉 setState됐다고 무조건 실행내용이 실행되는 것이 아닌 setState값이

페이지간 이동시 컴포넌트가 화면에서 사라지게 된다. 이때만 실행되게 하는 함수 :

https://webisfree.com/2020-03-24/\[react]-classname%EC%9D%84-%EC%A1%B0%EA%B1%B4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EB%8B%A4

React에서 import할때, 중괄호 {} 의 의미는 무엇인가??:https://codingmania.tistory.com/333d는 괄호 없이 불러오고, 나머지 a, c는 괄호 안에서 불러옵니다. 또한, c는 뒤에 as e라고 되어있네요.d :: defau

설명좋은 블로그https://velog.io/@shmoon2917/React-hook%EC%9D%98-lifecyclehttps://bgeun2.tistory.com/30화면이 처음 떴을때 실행.deps에 \[] 빈배열을 넣을 떄.life cycle중

자바스크립트는 일반적인 코드를 작성하면 synchronous(동기적) 하게 처리.자바스크립트는 어떤 함수들을 사용하면 asynchronous(비동기적) 하게 코드실행이 가능.ajax이벤트리스너setTimeoutstate 변경함수들: 이런 함수들은 처리시간이 오래 걸려서

https://han7096.medium.com/javascript-splice-%EC%99%80-slice-%EC%9D%98-%EC%B0%A8%EC%9D%B4-72a96ebaf266

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/https://dev-yakuza.posstree.com/ko/react/eslint/ESLintESLint는 JavaScript, JSX의 정

e.currentTarget으로 클릭요소를 불러오고 , 해당 돔의 data-\~~를 { dataset } 에 객체로 저장해준다. const { dataset } = e.currentTarget저장한 객체의 value 키를 value변수에 저장한다. const { val