만들면서 배우는 리액트 [인프런]

섹션 0 인트로

영어로 단어를 입력하면 그 단어를 가진 짤방이 나오게 된다

하트를 누르면 그 사진이 저장이 된다

live server , format on save

https://github.com/milooy/cat-jjal-maker/blob/main/answers/2-setup.html에 있는 소스 코드를 받아서 살을 붙이며 진행

answers라는 폴더를 보며 디버깅을 도움받기

index.html에 살붙여서 프로젝트 진행

 

 

 

 

섹션 1 리액트가 왜 좋은가요 ?

웹사이트 움직이게 만들기   

리액트 쓰기전 상당히 불편햇다. 그래서 리액트로 더 간결하게 처리할수 있는걸 배워보자

 

 

 

(ReactDOM.render에서 에러가 난다면 ? 강의노트 필수 참고) 리액트 맛보기

 

 

Render는 그린다는 뜻

< 꺽세라는 리액트가 이해할 수 없는 토큰을 사용해 에러가 났다?

스크립트 두개를 공식 사이트에서 찾아서 넣어주고 babel스크립트도  타입을 변경한 뒤 추가

<script

src="https://unpkg.com/react@17/umd/react.development.js"

crossorigin

></script>

<script

src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"

crossorigin

></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

그리고 작성한 태그의 스크립트에서의 타입도 text로 바꿔야한다. 

<script type="text/babel">

 

Babel

 브라우저가 이해할 수 있는 js로 바꿔주는 컴파일러

 

 

JSX로 HTML과 JavaScript 짬뽕하기

자바스크립트 변수를 리엑트 문법에 쓰는 법 은 중괄호 사용

리액트에 그릴수 있는건 최상위 태그가 하나여야한다. 아니면 에러

==>   div나 다른 태그로 묶어주면 해결 가능

 

 

 

섹션 2 리액트 앱 바닥부터 만들기

컴포넌트가 뭔가요 ?

 

위와 같이 반복된 작업을 할 때 사용 , 주로 엘리먼트를 컴포넌트로 바꾼다.

Ant design이라는 컴포넌트를 미리 만들어놓은 라이 브러리를 사용하는 것도 꿀팁

https://ant.design/

 

함수를 사용해서 컴포넌트를 만들 수 있다.

컴포넌트를 함수 호출처럼 안쓰고  html 태그 처럼도 사용가능

 

 

 

 

 

컴포넌트 만들기

 

컴포넌트는 무조건 대문자부터 시작해야한다.

인자로 넘기면 객체로 와서 객체.~~로 사용해야한다.

인자로 넘겨준걸 props라고 부른다.

<>~~<> 로 props를 보내면(태그 안에 적힌 내용) 객체의 children에 담긴다

 

const로 시작하는건 화살표 함수!! 즉, 같은 함수처럼 생각

 

 

컴포넌트 퀴즈 풀이

객체.~~를 안쓰고 ~~ 로 바로 사용가능

 

 

 

 

 

스타일링

리액트에는 class라는 프로퍼티 대신 className이라는 프로퍼티를 사용

 

 

emotion이라는 라이브러리를 사용하여  css props를 넘긴다  

https://emotion.sh/docs/introduction

 

 

tailwind CSS라는 라이브러리를 사용하여 className을 미리 정해놔서 빠르게 개발 가능.

https://tailwindcss.com/

 

 

 

 

이벤트 다루기

 

button에 onClikc(카멜케이스로 작성)이라는 props을 넘긴다.

 

이벤트 핸들러의 이름을 지을 때는 handle로 시작하는 관례가 있다.          

 

 

 

 

 

 

Onsubmit

 

Html은 폼을 전송하고 브라우저를 리프레쉬 시킨다.

 

 

 

 

 

 

 

 

 

useState로 상태 만들기

값을 바꾸고 싶을 때 사용한다.

Counter가 하나씩 증가하도록 구현

 

 

 

상태 끌어올리기

counter라는 상태는 From이라는 컴포넌트 안에 있다.

하지만 App이라는 상위 부모 컴포넌트에 counter의 값을 보이려 한다.

이럴때 하는게 상태 끌어올리기 이다.

 

 

From에서 props로 counter,setcounter 모두 넘겨 줄수도 있지만

handleFormSubit이라는 함수 자체를 props로  부모 컴포넌트에서

사용하도록 한다.

 

 

 

즉, 상태를 다른 컴포넌트에서 선언하게 만들고 부모컴포넌트에서 만큼 상태를 props로 만드다.

 

 

리스트

배열을 순회하는 자바스크립트 문법이 map이다. 

주로 실무에서는 배열을 순회 할때 id이 있으며 그 id값으로 순회를 할때 참조한다.

그래서 컴포넌트의 props으로 ke라는 속성을 추가해서 해결 한다.

 

배워던 개념 조합해서 기능추가 (상태,prop,이벤트, 리스트)

하트를 눌렀을 때 고양이가 고양이 리스트에 추가되고 favorite에 추가

 

 

 

폼 다루기

유저가 입력한걸 다루는걸 말함

소문자를 입력했을 때 대문자로 바뀌게

동적으로 바꿀때는 상태를 사용

 

폼 검증하기

에러 케이스 잡기  validation

한글은 입력 할수 없습니다~, 빈값은 생성할 수 없습니다~

정규표현식을 활용.

 

 

로컬스토리지에 데이터 싱크하기

브라우저 리프레쉬하면 데이터가 다시 초기화 대기 떄문에 브라우저 자체 저장소에 저장을하게 함

브라우저 api사용함

로컬 스토리지는 값을 스트링으로 가져와서 number로 바꾸는 전처리가 필요하다

 

불리언이나 다른 문자도 string으로 바뀌는걸 처리하는 유틸

 

 

 

섹션 3 지금까지 만든 앱 배포하기 github pages로 1차 배포

24 github pages로 1차 배포

 

 

섹션 4 중간 정리

지금까지 배운 개념 정리1(JSX,바벨, 컴포넌트, 스타일링,이벤트, 상태, 리스트, 폼, 로컬스토리지)

 

 

 

 

 

 

 

 

섹션 5 리액트 앱에 숨 불어넣기

실제 고양이 데이터 받아오기 -fetch, Open API

Api 호출해서 사용하기        

Fetch api 사용법

 

https://github.com/public-apis/public-apis

오픈 api를 모아놓은 깃헙

 

고양이 데이터 내 앱에 연동하기

오픈 api사용해서 앱 연동해서 사용하기

 

 

 

컴포넌트 생성시 고양이 데이터 받아오기 -useEffect

처음 화면에 들어왔을 때 화면에 뜨는 고양이가 아닌 서버에서 받아오는 고양이 사진으로

==>즉, 앱 진입시 api 바로 호출해서 사진 변경

 

 

 

useEffect의 정체

앱이 UI를 새로 그릴 때 마다 컴포넌트 및  console.log가 불린다.

UI가 바뀔 때 마다가 아닌 특정 시점(무언가 업데이트 될때)에 무엇을 바꾸고 싶을 때 사용

 

 counter변수가 바뀔 떄 마다 콘솔이 찍힌다.

 

 

 

 

맨 처음 앱 진입시는 빈 배열을 넣고 아니면 다른 함수를 넣는다.

 

조건부 렌더링

하트를 누른 사진이 없을 경우 [사진 위 하트를 눌러 고양이를 저장해봐요!] 라는 걸 띄우고 싶다.

하트를 누른 상태 마다 하트 색을 변경한다.

  

setState 더 알아보기 - 함수, 지연초기화

성능 최적화

로컬 스토리지에 자꾸 접근 하는게 아닌 처음 실행 될때만 접근 하도록 한다. 인자로 값을 넘기는게 아닌 함수를 넘겨주어 해결 !

 

 

내부 컴포넌트 코드는 컴포넌트 혹은 UI가 계속 바뀔 때 마다 코드가 실행이 된다.

 

 

 

 

 

 

 

섹션 6 실무 개발환경 만들

create-react-app 실무 개발환경 만들기

 

 

 

빌드한 결과물 github pages로 배포하기

스크립트 추가

 

깃헙에서 준 url을 추가

 

npm run build 

npm run deploy

그후 깃헙을 들어가보면 새로운 푸쉬가 왔다는 창과 브랜치가 추가 된것을 확인할 수 있다.

 

그 후 이전에 main 브랜치에에 있는 index파일이 아닌 빌드한 gh-pages라는 브랜치에 있는걸 올리라고 변경