React JS

대부분의 거대한 웹사이트 들이 React JS를 사용하고 있다.React의 사용률은 높아지고있다. 에어비엔비, 페이스북, 넷플릭스 등등..그래서 React는 계속 진화중이고 투자되고 있다. 또한 React JS의 커뮤니티는 점점 더 커지고 있다. React는 Javas

학습목표: 바닐라JS코드와 React JS 코드를 비교하여 왜 이것을 사용하는 지, 무엇이 더 편하고 어떤 문제를 해결하는지 체감하도록 한다.왜 좋은지 얼마나 좋은지 비교할 것이다.

오마이갓 !! 이 코드량을 봐,1\. HTML을 만들고 2\. const를 사용해서 Javascript에서 가져왔고3\. event를 감지하고4\. event를 업데이트 했네마지막으로 HTML을 업데이트 해서 화면에 출력하도록 했지.별거 아닌 것 같지만 이런 식으로 작

React JS의 규칙 중 하나는 HTML을 페이지에 직접 작성하지 않는다는 것이다. 대신에 Javascript 코드와 React JS로 element를 생성할 것이다.어려운 방식을 먼저 살펴보면서, React JS의 본질을 이해하자React JS 는 html에서 했던

다음 강의에서는 element를 생성하는 방식을 더 쉽게 바꿀 것이다.

복습...

개발자에게 더 편리한 도구를 사용하기 위해 : JSX >> Javascript를 확장한 문법이다. HTML에서 사용한 문법과 흡사한 문법을 사용한다. 이렇게 React 요소를 만드는 것이 개발자들에게 편하다.onMouse : ()=> 했던것 대신 괄호 안에 쓰는 방식

onMouse : ()=> 했던것 대신 괄호 안에 쓰는 방식으로 바꾸고 Babel에게 코드를넘겨준 것이다. Element 에서 Babel에서 변환하기 전과 후의 코드가 나타난다.직접 만든 컴포넌트를 렌더링 해서, 다른 곳에 사용할 때는 꼭 대문자여야 한다. 그렇게 하지

지금 만들어놓은 클릭하면 증가하는 counter 를 state로 만들 수 있다.어떻게하면 React/js 어플에 값이 바뀔 데이터를 담아줄 수 있을까?React JS코드 내에서 카운트를 셀 수 있게 만들어 보자 !!UI에서 바뀐 부분만 업데이트 된다. Total cli

다음 시간에 modifier 로 counter값을 변경하는 방법을 알아보자

이전 코드들과 비교해서 얼마나 편리해졌는지 확인해 봐라 !!

이것이 react의 가장 중요한 부분!! 데이터가 바뀔 때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것.다음 강의에서는 modifier 함수에 대해 알아야 할 내용들을 담을 것이다.바닐라 js를 완전히 대체한 React는\-html 요소를 생성하거나 찾을 필

위와 같이 state를 함수를 이용해 만든다면, 다른 곳에서 변경될 수도 있는 state 값을 조금 더 안전하게 변경할 수 있다.다음 시간에는 unit의 converter를 만들것이다.converter란, 예를 들어 분(minute)단위를 넣으면 그것을 시간 (hour

unit conversion(단위변환)

//jsx는 html과 비슷하지만 clss 나 for을 쓸 수 없다. htmlFor로 써줘야 한다

flip을 활용해서 값을 true 냐 false냐에 따라 input을 disable 할지 enable 할지 정한다.그리고 입력한 부분이 hour 냐 minute냐에 따라서 \*60 할지 /60할지 정한다.

state를 바탕으로 UI를 변경할 수 있는게 얼마나 유용한 지 알 수 있었다. 값을 바꾸고 싶을 때 마다 setAmount 나 setFlipped를 사용할 때마다 UI가 새로고침 되는 것이다 .그렇기 때문에 Inverted를 수정할때 마다 "Turn back" 또는

사용자가 원하는 단위 변환기를 선택하도록 할 것이다,분/ 시간, 마일/킬로미터 등으로..만약 데이터를 수정하기 위해 modifier함수를 이용한다면 그 modifier함수fmf 사용할 때 새로운 데이터와 함께 업데이트 될 것이다 시작단계에서 우리의 app컴포넌트는 i

Props 알아보기!!Properties 알아보기!!우리가 해야 할 일은 우리들의 컴포넌트를 좀 더 설정 가능하게끔 만드는 것이다 !!props는 오브젝트이고 우리는 props안에 banana가 있다는 사실을 알기 때문에 그냥 이렇게 할 수 있는 것이다.

이 곳에 그럼 onClick을 어떻게 전달할까?

React JS에서 PropType으로 지정해준 후 다른 type을 적었을 경우코드는 유효하므로 UI상의 에러는 없다. 단지 경고 메세지만을 추가해 줄 뿐이다.

설정 가능한 컴포넌트를 갖는것이 얼마나 멋진 일인가!복붙하지 않아도 된잖아마크업이나 스타일을 최대한 재사용 할 수 있잖아복붙하는 대신에 어떤 prop들을 받을 수 있는 Btn컴포넌트를 만든 거야 !Prop들은 단지 내가 인자를 이용해 컴포넌트를 데이터로 보내기 위한 수

npx 에서 새로운 폴더를 설치하기 위해 npx create-react-app@5.0.0 react_movie_web 을 cmd에서 쳐줬다.그러면 create-react-app이 만들어진다.이후에 VScode에서 start 스크립트를 실행해야 한다.TERMINAL을 키

import 부분create-react-app으로 작업할 때의 포인트는 "분할하고" "정복하는" 것이다.이런 방식으로 하여 style들도 modular가 될 수 있다!고로 이제 동일한 class 이름 btn을 다른 파일 내에서도 사용할 수 있다!!이것은 내내 다른 클래

지금은 나의 state가 변할 때 마다 매번 이 console.log는 실행될 것이다. 가끔은 첫번째로 render할 때만 코드를 실행하고 싶을 수도 있을 것이다. 그리고 나중에는 그렇게 하지 않을 수도 있다.그래서 첫번째 render에만 코드가 실행되고 다른 stat

가끔은 코드의 렌더를 제한하고 싶다는 것.. 이때useEffect는 쉽게 말해서 나의 코드가 딱 한번만 실행될 수 있도록 보호해준다.이 것은 state가 변화하든 무슨 일이 일어나든 코드가 단 한번만 실행하게 된다. 어떤 일이 일어나도 이 코드는 한번만!!

함수 조건 조금 추가해 주었다.이제 언제 코드가 실행될 지 결정하는 법을 배웠다. 특정한 keyword가 업뎃 될때만 코드실행이 가능하다.keyword와 counter가 변화될 때 실행하고 싶다면\*\* keyword, counter 둘다 적어주면 된다 !!

React의 가장 멋진 점은 새로운 데이터가 들어올 때마다 date를 refresh한다는 것이다.하지만 가끔은 나의 컴포넌트 안에 한번만 실행하고 싶은 경우가 있을 수 있다.어쩌면 시작시에만, 특정데이터가 변화할때만 실행하고 싶을 수 있다.이전에는 우리가 선택할 수 없

많이 쓰이는 것은 아니지만,, 구래도 알아둬라!컴포넌트가 파괴될 때도 code를 실행하기 !!cleanup은 자주 사용하게 되는 것은 아니지만,알아두면 요긴하긴하다.조금 다른 방식으로 reactJS프로젝트에서 사용하는 식으로 써보자. 두갤 비교해보자

state값을 수정할때 사용하는 함수의 두가지 방식1\. setToDo(""); 단순히 값만 보내는 방식2\. setToDos((currentArray) => toDo, ...currentArray)값을 보내는 방식2번째 방식은 현재 state를 계산하거나 추가할때 사

이렇게 저장된 정보를코드 챌린지는 input을 넣어 구매 가능한 coin 을 알려주도록 하는 것!이다.

영화들을 다 보여주기(평점 8.5 이상의 영화들을 가져올 것이다, 연도별로 정리할 것이다): https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=yearasync-await 사용하기await를

먼저 React의 장점을 활용하여 기존 코드를 깔끔하게 만들어보자.component를 사용하자 !먼저 Movie.js라는 컴포넌트를 만들 것이다.그리고 App.js 는 아래와 같이 수정해준다.먼저 설치!!라우터 별로 생각해서 분리한다.예를들어 하나의 router 는 h

react-router-dom을 사용하기 위해서는 몇가지를 import 해야 한다. 튜토리얼에서.. https://reactrouter.com/docs/en/v6/getting-started/overview

Home 컴포넌트이제 Movie가 prop 에서 id를 넘겨받고 있으므로 Movie도 설정해준다.이렇게 되면 url을 더 좋게 만들 수 있다.이제 영화 제목을 클릭하면detail 페이지로 옮겨감과 동시에 url이 바뀐다.url과 id가 같이 나오게 되는 것이다. 이는

gh-pages를 설치할 것이다.결과물을 업로드할 수 잇게 해주는 나이스한 패키지이다.github에서 제공하는 무료 서비스로 html, css, javaScript로 올리면 그걸 웹사이트로 만들어서 전 세계에 무료로 배포해준다 !!좋은 도메인도 갖게 된다.해야할 일의

Slice 기능 활용

https://velog.io/@limes/React-Async-await

app.jsList.jsListElement.ks

{"TOKEN":{"refreshToken":"eyJhbGciOiJIUzI1NiIs~","accessToken":"eyJhbGciOiJIUzI1NiIsInR~"},"usepersistState":"test"}보통 서버로 부터 다음과 같은 jwt를 발급받는다.이제 프론트