React_nomad

리액트와 바닐라의 궁극적 차이점은 html의 활용방식이라고 생각한다.바닐라 자바스크립트의 경우, html요소를 모두 코딩하고 그 다음에script태그를 기입해서 넣는 것이라고 보면 된다.리액트에서 html에 직접적으로 쓰는 코드는 <div id = "root>이게

rerendering을 매번 신경쓰지 않고 간단하게 표현하기 위해useState에 대해 알고 있어야한다.useState 첫 번째 인자에 초기값 0을 기입하면 배열의 첫 번째는 0으로 뜨고, 두 번째는 함수가 뜬다.아래 관련 레퍼런스에 따르면 첫 번째 전달된 인자에 맞게

onClick함수에서 state를 세팅하는 방법에 대한 이야기이다.setCounter(counter + 1) 이 방식은 직접 state를 할당하는 방식이다.다시 말해 setCounter(5) 이런 식으로 직접 넣는 것과 같다.그러나 직접 할당방식은 counter값이 의

다음과 같이 input태그에 적용할 state함수를 만들어보겠다.코드는 다음과 같다.App함수 내 return 부분,즉 웹 UI상으로 표현할 부분을 나타낸다.일반 HTML과 달리, React에서는h1태그 부분의 class는 className으로,label 태그 부분의

reset버튼 클릭하기 전reset버튼 클릭 후reset함수를 만들어서setAmount함수에 공백을 나타내는 ""을 넣어서 값을 초기화시켜준다.return부분 코드에 button태그를 넣어준다. onClick 이벤트리스너를 적용하여클릭했을 때 reset함수가 실행될 수

다음과 같이 드롭다운 메뉴에 state를 할당하는 연습을 해보려고 한다. 편의상 시간, 분 변환 / 길이단위 변환 / 온도 단위 변환 등을 각각 컴포넌트화시켜 분리하였다. return 먼저 UI에 구현할 html파트를 return 부분에 기입한다. 드롭다운 메뉴를

props는 부모 컴포넌트에서 자식 컴포넌트로 '속성'의 데이터를 전달하는 방식을 나타낸다.props관련 reference이전 converter예제는 각 컴포넌트가 독립적이었기 때문에 props를 활용하지 않아도 되었지만,부모 - 자식 간의 종속적인 데이터를 활용할 경

이번에는 Save Changes버튼을 누르면 Revert Changes로 버튼명이 바뀌는 효과를이벤트리스너를 등록하시는 방식이 아닌, props를 활용해서 해보겠다.먼저 다음과 같이 코드를 짜준다.Save changes 버튼명을 바꾸기 위해 첫 번째 Btn compon

코드가 많아지고 그에 따른 props가 많아진다면,props의 type에 따른 버그가 생길 수 있다.이 버그는 syntax error에 들어가지 않아서 console창에 뜨지 않기 때문에PropTypes를 설치하여 console창에 검사를 할 수 있도록 만들어보자.잘

그동안 니꼬쌤의 강의는 react를 CDN방식으로 해왔는데,그보다 더 쉬운 방식인 create-react-app을 소개하셨다.아마 생활코딩에서 알려줬던 방식과 동일한 것으로 보인다.사실 생활코딩으로 먼저 접할 땐 create-react-app방식이 눈에 잘 안들어왔는데

React의 장점은 CSS파일을 모듈로 만들 수 있다는 것이다.일반적인 CSS파일은 Global(전역)하게 적용이 되는데,코드의 양이 방대해지면 그 중 일부분만 CSS를 적용하는데에 불편함이 발생한다.그 불편함을 해소하기 위해 inline CSS를 써도 좋지만,inli

state변경할 때 한 번만 랜더링 해야하는 경우가 있다.예를 들면 API를 불러올 때는 오로지 한 번만 가져오면 된다.이를 해결해주는 개념이 useEffect이다.다음 예시를 보자클릭할 때마다 1씩 올라가는 이벤트를 구현한 간단한 예시이다.코드는 다음과 같다.useE

니꼬쌤은 useEffect에서 cleanUP 부분을 자주 사용하진 않는다고 하지만,그래도 필요할 때 사용할 수 있다고 해서 정리해본다.다음 버튼의 예시로 설명해보자.이 버튼의 default는 show버튼일 때인데, 클릭하면다음과 같이 Hello라는 글자가 보이고 버튼은

그동안 배웠던 state, props, effect 등의 개념을 복습하는 차원에서To Do List를 만드는 예제를 진행한다.먼저 To Do List에 새로운 데이터를 추가하기 위한form을 만들어준다.다음과 같이 App component return부분에 넣어준다.i

다음과 같은 coin api를 가져와서 나타내는 예제를 해보자.API주소는 다음과 같다.https://api.coinpaprika.com/v1/tickers먼저 다음과 같이 API 호출 전 loading 중임을 나타내는 초기화면을 만들어보자loading sta

이전 coin track예제에서 api를 불러올 때then함수를 이용하였지만,요즘은 async - await함수를 활용한다고 한다.async 관련 MDNawait 관련 MDN비동기 처리에 대한 개념then 함수 활용 api 호출 코드async - await 활용 api

이전에 만든 movie app 예제는 한 페이지 안에서만 내용이 모두 들어가있다.각 영화마다 링크를 걸어서 자세한 내용이 있는 페이징 작업을 해보고자 한다.그 작업을 하기 위해서 router를 활용해야 하기 때문에다음과 같이 커맨드 창에 입력하고 React Router

React Router를 적용하기 위해index.js부분에서 다음과 같은 명령어로 먼저 설치를 해줘야한다.npm i react-router-dom@5.3.0설치 후 App.js에 import를 다음과 같이 해준다.BrouserRouter as 다음에 Link도 들어가지

React Router는 위와 같이 URL에 다양한 변수를 넣어서 동적으로 만들 수 있다.해당하는 영화 제목을 누르면 Detail페이지로 들어가면서URL을 동적으로 변화시켜보도록 하자. 매개변수로 Movie Api의 id데이터를 활용할 것이다.App.js에서 Route

create-react-app으로 만든 파일을 github에 업로드하는 방법이 궁금했는데,마침 노마드코더에서 다뤄줘서 필요한 명령어를 정리해놓고자 한다.1) 프로젝트 폴더가 있는 위치에서 git 생성2) github.com/new -> 새로운 저장소 생성 혹은 기존 저

: React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리(React Query is often described as the missing data-fetching li

React는 props를 통해 상위 -> 하위 컴포넌트로 정보를 전달한다. 그런데 만약 최상위 컴포넌트의 props를 최하위 컴포넌트로 전달해야한다고 치자,그러면 모든 컴포넌트를 거쳐서 이동해야하는 번거로움이 생긴다.이러한 문제를 해결하기 위해 상태관리 라이브러리가 필

react-master-class와 code challenge까지 2주동안 숨가쁘게 달려서 마무리는 했지만,중급과정이다보니 수많은 hook과 library가 나와서 정리가 안된 부분이 있다.그래서 다시 react-hook class로 넘어와서 찬찬히 정리해보고자 한다.

useForm은 쉽게 form을 관리하기 위한 훅이다. register: 입력 및 element를 선택하고 유효성 검사 규칙 적용가능.{...register} 이런 방식으로 코딩했음.handleSubmit: form의 유효성 검사를 통과하면 데이터를 수신한다.관련 Do