React
1.React -#1 React 시작!
react를 시작하게 된 동기는 다름아닌 프로젝트 투입이였다. 원래 기존에 vue를 조금 공부해보면서 react도 시간나면 접근해봐야겠다는 생각이 들곤 하였는데, 프로젝트 투입이라는 동기로 인해 좋은 기회를 얻은것같다!열심히 한번 부딛혀 봐야겠다.!!😂React란??
2.React에서 jsx, js사용
React는 jsx(문자도 HTML도 아닌 JavaScript의 확장 문법)을 사용한다.jsx는 js와 함께 혼용되어 쓸 수 있다.이것을 전문용어로 Interpolation라고 하는데,한 가지 플로우안에 a라는 타입도 쓰고 b라는 타입도 쓰며 섞어쓴다는 의미이다.즉 j
3.React의 리렌더링
vanilla js. : 변경으로 인해 element를 다시그림react : 변경된 부분만 다시 그림vanilla js로 개발할 경우 tab으로 focus를 체크할 경우 button component가 계속 새로 그려지기 때문에 focus를 잃어버린다. 그렇다면 rea
4.Reflow, Repaint
알아보자.. 조사해보고 적기
5.React event handler 기초
React의 event handler를 알아보기전에js와 react의 event handler 차이를 알아보자js 는 eventListener로 주입하여 주거나inline 방식으로 element의 event 속성을 통해 사용한다.React도 JS와 유사하지만 Js는 소
6.React hook - useState
React의 useState라는 hook에 대해서 알아볼 것이다.use~가 붙으면 react hook이라는 의미이다.hook은 React 16.8.0 version 부터 배포된 기술이다.react hook - 리엑트 공식 사이트(https://ko.reactj
7.Component?
component, element, dom은 무엇일까????자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.자바스크
8.useEffect - 컴포넌트 사이드 이펙트 다루기
사이트 이펙트 === 부작용의도하지 않은 효과 or 부수 효과리엑트에서 변경이나 효과가 일어날 때 효과를 다른곳으로 전파 or 부수적인 효과를 내주기 위한 hook이다. useState를 초기값을 세팅할 시 윈도우의 localStorage에 도달했다가 꺼내와야하기 때문
9.custom hook 만들기
keyword, result라는 state가 있는데 이 둘 state가 변경시 localStorage에 값을 저장하고 싶을 경우 어떻게 해야할까?위의 코드의 문제는 - Keyword, result 둘중 하나가 변경되도 값이 저장되어 버린다. 각각이 변경되었을 경우에만
10.hook flow
hook flow - component를 그리고 hook을 사용하였는데 그 hook이 언제 불리고 언제 사라지고 중첩적으로 comp 만들었을때는 comp간 hook의 호출 타이밍은 언제인지? hook의 호출 타이밍 ex) 일반적인 순서 알아보기 호출 순서 > AP
11.element에 className, style 적용하기
이번에는 react에서 element에 style을 적용하는 방법 중 하나를 공부해볼 것이다.😎배경색상만 props로 전달받아 설정 component가 있다고 생각하자 어떻게 ButtonBox component는 props를 받으면 될까?첫번째 방법은 props로 넘
12.React에서 Form다루기
js에서 사용하던 onsubmit="return false"를 사용하지 못한다.그대신 submit handler 함수에서 event객체의 e.preventDefault를 이용한다.controlled component vs uncontrolled componentHTML
13.React에서 error 다루기
React에서 erorr를 다루는 방법은 여러가지가 있을 것이다. 그 중에서errorBounary를 이용해서 error를 처리 해볼 것이다.만약 react에서 error가 생기면 js전체가 그기능을 못하고 화면에 아무것도 표출하지 못한다.
14.HOC
고차 컴포넌트는 컴포넌트를 가져와서 새 컴포넌트를 반환하는 함수이다.인자를 컴포넌트로 받고 return으로 새로운 컴포넌트를 해준다.코드의 재사용컴포넌트는 props로 ui를 반환하고 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 반환한다.compoenent의 기능을
15.memo,useState, useMemo,
16.key와 rendering
17.Memoization
React.memo, useCallback, useMemo noMemo memo nousememo usememo nouseCallback  was not found in 'react-router-dom'
클론 코딩을 하던 중 해당 error가 발생하였다.원인을 알아보니 React6 version 부터 react-router-dom에 switch를 제공하지 않고 Routes로 네이밍 변경이 일어난 것이다.route의 복수개를 나타내는 이유로 routes로 변경 되었다고한
20.Profiler Api
Memoization의 구체적은 성능 최적화 방법을 사용하기 위해서는 Profiler라는 Api를 사용하면된다 Profiler는 React 애플리케이션이 렌더링하는 빈도, 렌더링 비용을 측정하며 애플리케이션의 성능이 느린부분을 확인할수 있는 Api이다.사용방법Profi