react

axios로 열심히 state를 가져와 업데이트해 view를 보여주고 있는 일상이었다. async붙여가며 비동기/동기 맛좀 보고 있었는데 '리액트를 다루는 기술'에서 새로운 사실을 알았다.... 사실 비동기/동기랑 상관 없는 최적화 작업이었지만... 다음과 같다.본 책

나는 지금까지 view에 나타낼 리스트가 끽해야 100개 미만이었다.때문에 리스트를 스크롤해서 내리는 과정에 최적화가 필요하지 않았다.하지만 만약 1000개라면?1억개라면?? 풀할부로 지른 맥북은 버티질 못하고 비명횡사를 할 것이다. 이 때 spring boot로 페이

웹 폰트를 리액트에 적용하는데 시간이 많이 걸렸다.난 ttf를 format으로 woff로 바꿀 수 있는지 몰랐다.머리가 나쁘면 손이 고생하는게 맞는 것 같다...리액트에 web폰트를 적용하고 싶으면 src 폴더에 font 하위 폴더를 만들고 fonts.js를 만들자 필

children을 props로 받아오면 된다. 단순한 html text 도 저렇게 불러와야한다는걸 지금 알았다.App.js는 이렇게 되겠다.

매우 간단한 컴포넌트 하나를 만들고 있었다.하지만 toggle에서 오류가 떴다. 내용은 뭘까?이 호출과 일치하는 오버로드가 없습니다. 오버로드 1/2('(props: { slot?: string | undefined; style?: CSSProperties | und

테이블 컴포넌트에 studentList를 props로 전달하는 아주 좋은 함수다타입은 다음과 같이 정했다.이제 받기만 하면 되겠지?당연히 안된다. 왜 안될까?인터넷을 뒤져본 결과 자식에서 잘 못 받아버렸다.객체 디스트럭팅은 이렇게 해야한다고 한다... props로 넘겨

먼저 결과를 저장하는 오브젝트배열은 다음과 같다.최종 데이터를 저장하는 state가장 먼저 정해야 할 것은 다음과 같다.1.라디오버튼2.이 라디오버튼을 감싸는 컨테이너map으로 10개의 리스트를 불러온다 하면 radiogroup은 10개가 생성되며, 그 안에 cheke

:uid는 파라미터로 받아오는 주소, ?bigCategory=big?smallCategory=small 에서 bigCategory,smallCategory는Link에서 줘야 할 key값이다. 뒤에 나오는 big,small은 아무렇게 작명해도 상관없다,:uid값은 pro

스타일 컴포넌트를 사용할 때는 웬만해선 view를 return하는 tsx,js 파일 외에 선언하여 import 하자. 한 함수에 다 선언을 하게 되면 state에 변환을 주면 리랜더링이 일어나는데, 이 때 함수에 선언된 스타일 컴포너트도 리랜더링이 된다. 당연히 속도저

클론코딩의 필수 덕목 infinite scroll이다.원리를 설명하자면, react에서 dom을 접근할 수 있는 거의 유일한 요소인 ref를 활용하여 해당 element가 화면에 보인다면 특정 콜백함수를 실행시킴으로서 새로운 데이터를 fetch하는 것이다. 바로 코드로

두개의 state가 있다. 나는 지금부터 이 state를 파라미터로 넘겨 sort를 이용해 정렬 할 것이다.동기적으로 진행하기 위해 promise로 진행하였다.그 후 setSortedData 함수를 만들어 state를 바꾸자파라미터도 잘 넘어갔고..이제 버튼을 클릭하여

프로젝트 진행중, 토글과 같은 boolean타입의 여러 component에 대해 그 바깥영역을 클릭했을 때 작동되는 함수를 만들고 싶어졌다. vanilla javascript에서는 jquery를 활용에 구현했던 기억이 있었지만, react에서는 dom에 접근할 때 re

라이브러리,프레임워크의 차이라이브러리: 폴더의 구조가 없음.프레임 워크:폴더 구조가 있음.패키지를 설치 할 수 있기 때문에리액트 개발을 할 때 편하게 초기 세팅을 설치받아서 사용할 수 있다.메타에서 개발한 것은 react와 react-router 라이브러리메타에서 개발

전체코드로또 전체를 감싸는 컨테이너로또 번호가 생성이 되는 함수를 App에 정의하였다.그리하여야만 LottoTitleWithBtn 에 함수를 props로 전달하여 App에 있는 state를 바꿀 수 있다.로또 번호가 있는 LottoBallBox와 현재 로또번호를 나타내

자바스크립트 코드의 변환을 도와주는 도구자바스크립트를 컴파일 해주는 도구자바스크립트 문법이 진화를 꾸준히 했고ES5 => ES6문법이 개발되고ES6 문법이 개발 되었는데 ES5에서 개발한 것들을 모두변환하기 힘들다.그래서 쓰는 것이 babel 라이브러리다.먼저 babe

저번에 사용했던 Routes 이다.차이점은 Redirect이다. Redirect는 만약 로그인이 안되어있다면 Navigate 훅을 return한다.Navigate 훅은 to에 있는 경로로 강제로 이동시키는 훅이다즉 Main 컴포넌트로 가게 된다.useLocation()

쉽게 말해 props로 자식에게 계속 값을 주는 과정을 전역변수화 하여 관리한다는 것이다.먼저 Provider를 넣는다.2.redux는 기본적으로 action이 reducer의 매개변수로 들어가 store가 변하는 방식으로 작동된다.action을 실행시키는 곳을 정할

Redux Toolkit은 Redux를 더 효율적으로 개발할 수 있도록 도와주는 도구이다. 기존 redux는 reducer를 일일히 작성해줘야 했지만 redux toolkit은 createSlice와 createReducer와 같은 함수를 통해 상태와 리듀서를 쉽게 생

해당 코드에서 알 수 있듯이 매우 간단하게 propmt를 입력하고 가져올 수 있다. 물론 더 좋은 엔진과 코드를 사용 할 수 있지만... 지갑이...initMap으로 지도를 만들어준다. 아무리 설정을 해도 initMap을 실행시켜주지않으면 지도는 그려지지 않는다....