[코딩애플🍎] React 리액트 기초부터 쇼핑몰 프로젝트까지! - Part 1 요약💬

리액트 공부를 어떻게 시작해야 할지 고민하는 분들에게 추천하고 싶은 강의이다.
마냥 어려워 보이던 리액트를 실습과 함께하니 쉽게 이해가 되고, 강의 한 개당 시간이
짧아서 금방 완강할 것 같다. 아무튼, 짧아도 강의마다 핵심 내용이 있기에 적어놓은
요약본을 블로그에 남겨보려 한다!

• 개발 환경 셋팅 후(nodejs 최신버전, VS Code 에디터 설치 후 create-react-app 라이브러리로 프로젝트 생성) 새로운 프로젝트 폴더를 생성하면 위의 그림처럼 파일 구조가 되어있음
  1) App.js : 메인페이지에 들어갈 HTML 짜는 곳
  2) index.html : 실제 렌더링되는 파일
  3) index.js : App.js의 모든 내용을 index.html에 넣을 수 있게 돕는 역할
  
  

• 그 외,
  1) node-modules : 라이브러리 모음 폴더
  2) public : static 파일 보관함
  3) src : 소스코드 보관함
  4) package.json : 설치한 라이브러리 목록

---

[ HTML처럼 생긴 JSX ]

1. 태그에 class를 주고싶으면?
   
2. 리액트에서 데이터바인딩 쉽게하는 법
     - src, id, href등의 속성에도 가능
     - 상상하는 모든 곳에 {}로 변수 집어넣기 가능
   
   
3. JSX에서 style 속성을 집어넣을 때
     - camelCase 작명 관습에 따라 속성 바꿔줘야 함

---

[ 중요한 데이터는 변수 말고 리액트 state로 만들기 ]

• 데이터는 1. 변수에 넣거나 / 2. state에 넣거나

• 리액트의 데이터 저장공간 state 만드는 법
  1. import{ useState } from 'react' 상단에 추가
  2. useState(데이터)

   - (참고) ES6 destructuring 문법 : array, object에 있던 자료를 변수에 쉽게 담고 싶을 때

• (결론) state는,
  1. 변수 대신 쓰는 데이터 저장공간
  2. useState()를 이용해 만들어야 함
  3. 문자, 숫자, array, object 다 저장가능

• state에 데이터 저장해놓는 이유 : 웹이 App처럼 동작하게 만들고 싶어서
  -> state는 변경되면 HTML이 자동으로 재렌더링이 됨
       ex) 제목 정렬, 제목 수정...
      (새로고침 없이도 HTML이 재렌더링 됨)

• 자주 바뀌는, 중요한 데이터는 변수X -> state로 저장해서 쓰기

---

[ 버튼에 기능개발을 해보기 / 리액트 state 변경 방법 ]

• 리액트 onClick
  
  - 특이사항
  1) Click이 대문자
  2) {} 중괄호 사용
  3) 그냥 코드가 아닌 함수를 적음

• state 변경하려면 보통 아래의 패턴으로 코드를 짬
  1. 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성함
  2. 카피본을 입맛에 맞게 수정
  3. 카피본을 state변경함수()에 집어넣음

---

[ React Component : 많은 div들을 한 단어로 줄이고 싶을 때 ]

• return()안에 HTML을 넣을 때,
  이렇게 태그 2개를 평행하게 적어넣을 수 없고
  굳이 쓴다면 이런 식으로 한 번 더 감싸야 함 -> return()안엔 태드 하나만 들어갈 수 있음

• HTML을 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법

• Component 만드는 법
  1. 함수 만들고 이름 짓고
  2. 축약을 원하는 HTML 넣고
  3. 원하는 곳에 <함수명 />

• Component 유의사항
  1. 이름은 대괄호
  2. return()안에 있는 건 태그 하나로 묶어야 함

• return() 내부를 묶을 때 의미없는 < div >를 쓰기 싫다면 <></>

• 컴포넌트를 만들어두면 관리가 편해짐 -> 어떤걸 Component로?
  1. 반복 출현하는 HTML 덩어리들
  2. 자주 변경되는 HTML UI들
  3. 다른 페이지 만들때도 컴포넌트로 만듦

• 컴포넌트 많이 만들면 단점 : state쓸때 복잡해짐 (상위 컴포넌트에서 만든 state쓰려면 props문법 이용해야 함)

---

[ 클릭하면 동작하는 UI(모달창) 만드는 법 ]

1. 모달창이 보이는 / 보이지 않는 상태 정보를 저장할 state 하나 만들기
2. if문(삼항연산자) 이용해서 스위치 켜져 있을 때만 모달창 보인다고 명시
3. 모달창 여닫는 역할을 하는 버튼 클릭시 state가 바뀌도록 기능 개발

• map : 많은 div들을 반복문으로 줄이고 싶을 때

• array내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 .map()(유사반복문)을 사용함

• 반복문 쓰는 법

• for반복문을 쓰고 싶다면?
    - 보통 함수 안에서 사용함
    - array에 HTML 추가하는 방식
    - 그리고 array를 return으로 뱉어냄
  

---

[ props : 자식이 부모의 state를 가져다 쓰고 싶을 때는 말하고 쓰기 ]

• props를 사용하려면?
  1. <자식컴포넌트 전송할이름 = { state명 } /> 이렇게 사용한 후
  2. 자식컴포넌트 선언하는 함수 소괄호 내에 파라미터 하나 추가해주기

• props를 응용한 상세페이지 만들기
  1. state를 하나 만들고
  2. state가 어떠한 상태일 때 UI를 어떻게 보여주라고 코드 짜면 끝
  3. 버튼 누르거나 할 때는 state를 이렇게 바꿔주세요~ 이런것도 필요하면 추가
  

---

[ 사용자가 입력한 글을 변수에 저장하는 법 ]

• 사용자가 input에 입력한 데이터 -> 보통 중요한 데이터이므로 state에 저장해서 사용

• map을 쓰면 콘솔창에 에러나는 이유 ? key={}라는 속성을 적지 않아서 (리액트는 반복문 돌린 HTML 요소엔 꼭 key={}를 적으라고 권장함)

• state는 직접 수정하면 안됨 -> 카피본을 만들어 수정한 후 그게 새로운 state가 되도록 해야 함
  

---

[ class를 이용한 옛날 React 문법 ]

• 위와 같은 형식으로 되어 있음