React

Naver Vibe, Flipkart, Instagram 등 웹 사이트를 들어가면페이지 전환같은게 새로고침 없이 부드럽게 동작한다이런 사이트들을 Single Page Application 이라고 한다.html 파일을 1개만 사용다른페이지를 보여주고 싶을 땐 html 부

구글에 Node.js 검색해서 LTS 써있는 버전 설치하기Visual Studio Code 에디터 설치하기작업용 폴더 만들기폴더에 Shift+우클릭으로 powershell 혹은 터미널 열기 누르기터미널에 "npx creat-react-app 프로젝트명" 엔터에디터에서

html/css와 다른 부분은 스타일을 주기 위한 class명을 넣을 때 class="" 가 아니라 className=""이렇게 써야한다왜냐하면 실은 App.js에 짜고있는건 html이 아니라 JSX라는 언어이기 때문이다임시로post라는 변수를 만들어서 문자를 저장한다

이전 강의에서 let post = '어쩌구' 이렇게 변수에 데이터를 저장했는데 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다useState 후 엔터를 치면맨 윗줄에 import {useState}from 'react' 라는게 생긴다원하는 곳에

버튼을 누르면 좋아요 개수가 1개씩 증가하는 기능 만들어보기\-> html 레이아웃 먼저 만들기자주 바뀔 것 같은 html 내용은 state로 저장했다가 데이터바인딩을 해야한다따라서 좋아요 갯수를 state로 만들어보면어떤 html을 클릭 시 원하는 코드 실행하는 방법

\-> 글제목수정 버튼을 누르면 첫 글이 '중년 코트 추천' 으로 수정되는 기능 만들기전 시간에 배웠던 내용대로 한다면 물음표 안에 '중년 코트 추천', '남자 코트 추천', '아동 코트 추천' 를 넣으면 된다만약 \[] 안에 글이 100개 들어있다면 onClick 안

html css 레이아웃html 코드 짤 때 유의점!return() 안에 두개의 html 태그를 나란히 작성은 불가능XXreturn() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야한다굳이 <div> 두개를 나란히 적고싶다면 하나의 div로 감싸도 괜찮다의미

동적 UI란?\-> 유저가 조작 시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 이런 UI들을 의미한다1\. html css 로 미리 UI 디자인하기2\. UI 현재 상태를 state로 저장하기3\. state에 따라서 UI가 어떻게 보일지 조건문 등으로

똑같은 html이 반복적으로 나오면 반복문을 이용해서 쉽게 똑같은 html 을 만들 수 있다 하지만 JSX중괄호 안에서는 for 반복문을 사용할 수 없어서 map()을 사용한다 자바스크립트 map 함수 쓰는 법 모든 array 자료 우측엔 map()함수를 붙일 수 있

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고싶으면 props 로 전송해서 쓰면 된다\-> 작동안됨'글제목' 이라는 변수가 define 되지 않는다는 에러가 뜬다글제목이라는 state 변수는 function App() 에 있지 function Modal() 에

ex) 0번 글을 누르면 0번 글제목이 모달창 안에, 1번 글을 누르면 1번 글제목이 모달창 안에 뜨도록 만들기( 모달창 안의 제목도 바뀌는 것이기 때문에 일종의 동적인 UI 이므로 step3대로 만든다면 쉽게 할 수 있다!)function App(){} 안에 titl

유저가 입력받을 수 있는 박스를 생성하고 싶을 땐 <input> 태그를 사용하면 된다.유저가 <input>에 무언가를 입력하면 코드를 실행시키고 싶을 때에는 onChange 혹은 면 onInput 이벤트핸들러를 부착하면된다.e.target.value 는 현재

원본 보존을 위해 글제목state를 카피했다.array 형태의 state 조작은 카피부터 해야한다!!!💡 (꼭 기억하기)카피 후 unshift(입력값) 을 해준다.unshift : array 자료 맨 앞에 자료추가 하는 문법이다.state변경함수를 사용한다.state

작업폴더 shift + 우클릭 -> powershell/터미널 열기터미널에 리액트 프로젝트 생성 명령어 입력하기shop 이라는 폴더를 VScode 에디터로 오픈하기App.js에 필요없는 html은 삭제하고 div 하나만 남기기버튼이 필요하다면?React-Bootstra

https://codingapple1.github.io/shop/shoes1.jpghttps://codingapple1.github.io/shop/shoes2.jpghttps://codingapple1.github.io/shop/shoes3.

3개의 상품 데이터를 html에 보여줘야한다.알려준 자료를 state에 보관해놓고 html에 데이터바인딩을 할 것이다.실제 서비스였으면 서버에서 받아왔지만 서버가 없으니 변수에 저장해서 사용해야한다.어렵게 생각하지말고 array 자료 에 {object자료} 상품정보 3

오늘 만든 상품목록을 컴포넌트로 만들기컴포넌트를 만든 후 데이터바인딩 하기반복적인 html이나 컴포넌트를 발견하면 연습삼아 map 반복문 사용해보기

선생님이 하신 코드가 더 짧고, 여러 방법을 알아보기 위해 해설강의를 들어봤다. 내가 완성한건 컴포넌트와 map 함수만 사용했고 실질적으로 컴포넌트를 사용하지 않았었다.컴포넌트 만들기Card 라는 작명을 했고, <Col>을 같이 묶어서 컴포넌트로 만들었다.지난번

투데이를 누르면 /today로 차트를 누르면 /chart로 이동이 된다.일반 js에서는 html파일을 여러개 만든 후 접속하면 html 파일을 보내주었다.하지만 리액트에서는 하나의 html파일을 만든 후 접속하면 컴포넌트를 보여주는 방법을 사용한다.일반적으로는 reac

리액트는 html을 예쁘게 만들어주는 조그만 라이브러리일 뿐이다.그래서 우리가 만드는 파일들은 95%의 확률로 .js파일이기 때문에 비슷한 .js파일끼리 한 폴더에 묶어놓으면 그것이 좋은 폴더 구조 이다.컴포넌트 역할을 하는 js 파일은 component 폴더에 묶고페

shoes라는 state에 있던 상품정보들로 내용 채울 예정이다.shoes 는 App 컴포넌트에 있으니 App -> Detail 로 전송하면 쓸 수 있다. (props 사용하면 된다!!)App.js 안에 <Detail>을 쓰는 곳에서 props 를 전송한다.Det

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생길 수 있다.ex) 1. class 만들어 놓은 걸 잊고 중복해서 또 만들 수 있다. 2\. 갑자기 다른 컴포넌트에 원하지 않은 스타일이 적용된다. (리액트 특성 상 모든 파일을 합쳐버리기 때문이다.) 3\

우리가 쓰는 컴포넌트에는 Lifecycle 이라는 개념이 있다.컴포넌트에게도 인생이 있다...🤭컴포넌트는생성이 될 수도 있고 (mount)재렌더링이 될 수도 있고 (update)삭제가 될 수도 있다. (unmount)그렇다면 컴포넌트의 인생을 배우는 이유는??우리가

\-> count라는 변수가 변할때만 useEffect 안의 코드가 실행된다.useEffect() 의 둘째 파라미터로 \[] 를 넣을 수 있다.여기에 변수나 state같은 것들을 넣을 수 있다.\[] 안에 있는 변수나 state가 변할때만 useEffect 안의 코드를

: 버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해보기(힌트) 리액트에서는 html을 3개 더 생성해주세요~ 가 아닌 state를 조작하면 html이 알아서 생성된다.기존의 Card() 함수를 활용해서 만들기 위해 useStat

서버로 {name : 'kim'} 자료가 전송된다.이것도 뒤에 .then() 을 붙이면 완료 시 특정코드를 실행할 수 있다.

⭐ 항상 나오는 동적 UI 만들기 step 3!!html css로 디자인 미리 완성해놓고UI의 현재 상태를 저장할 state 하나 만들고state에 따라서 UI가 어떻게 보일지 작성하면 된다.버튼 3개와 <div> 3개가 필요하다.디자인 하는 버튼은 react-b

애니메이션 만들기애니메이션 동작 전 스타일을 담을 className 만들기애니메이션 동작 후 스타일을 담을 className 만들기transition 속성도 추가원할때 2번을 부착하기css 파일에 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1이 되는 cla

App 에 있던 state를 TabContent 컴포넌트에서 사용하고 싶으면 App -> Detail -> TabContent 이렇게 props 를 2번 전송해주면 된다.재고라는 state를 App 컴포넌트에 만들고 이걸 TabContent 라는 자식 컴포넌트에서 쓰고

/cart 로 접속하면 장바구니 페이지를 보여줘야한다.장바구니는 Redux 를 사용해보는 시간!!페이지 하나가 필요하다면? Route 를 사용하면 된다.App.js 의 <Route> 쓰는 곳을 찾아가서 <Route>를 새로 추가해준다.이제 /cart 로 접

⭐⭐ 항상 뭐 배우기 전에 이걸 왜 쓰는지 생각하는게 중요하다고 강의에서 계속!! 말했다. Redux 라이브러리를 쓰는 이유는 state를 Redux store 에 보관해 둘 수 있는데 모든 컴포넌트가 여기에 있는 state를 직접 꺼내쓸 수 있어서 props없이도 편

Redux 의 state를 변경하고 싶으면 변경하는 법이 따로 있다.store.js에 state 변경해주는 함수를 만들고export 하고필요할 때 import 해서 쓰면 되는데 dispatch()로 감싸서 써야한다.1\. store.js 안에 state 수정해주는 함수

store에 저장된 state가 array, object 자료인 경우 state변경을 조금 더 편리하게 할 수 있다.{name : 'kim', age : 20} 이렇게 생긴 자료를 state로 만든다.여기서 'kim' -> 'park' 로 변경하는 state변경함수 만

버튼을 누르면 state를 수정해야 하므로 state를 +1 해주는 수정함수부터 먼저 만든다.addCount 라는 함수를 만들고 action 이라는 파라미터를 통해서addCount(0) 을 하면 0번째 상품이 +1 되게, addCount(1) 을 하면 1번째 상품이 +

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓰면 된다.우리가 자주 쓰는 자바스크립트 if문은 return() 안의 JSX 내에서는 사용 불가능하다.<div> if (어쩌구) {저쩌구} </div> ❌❌그래서 보통 return + JSX 전체를 퉤

새로고침을 하면 모든 state 데이터는 리셋이 된다.그 이유는 새로고침하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문이다.이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하면 된다.서버나 DB에 대해 잘 모른다면 localStora

ajax 요청하다보면 아래 기능들이 가끔 필요해진다.몇초마다 자동으로 데이터 다시 가져오게 하기요청 실패 시 몇초 간격으로 재시도하기다음 페이지 미리 가져오기ajax 성공/실패 시 각각 다른 html 보여주기직접 개발해도 되고 react-query 라는 라이브러리를 설