코딩애플 리액트 part1 (11/9~)

강의 목차

# Part 1 : 블로그 제작 & 기초 문법

1. React 배우기 전에 쓰는 이유부터 알아야
2. 리액트 React 설치와 개발환경 셋팅 (2022 ver)
3. 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개
4. 중요한 데이터는 변수말고 state에 담습니다
5. 버튼에 기능개발을 해보자 & 리액트 state변경하는 법
6. array, object state 변경하는 법
7. Component : 많은 div들을 한 단어로 줄이고 싶으면
8. 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)
9. map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때
10. 자식이 부모의 state 가져다쓰고 싶을 때는 props
11. props를 응용한 상세페이지 만들기
12. input 1 : 사용자가 입력한 글 다루기
13. input 다루기 2 : 블로그 글발행 기능 만들기
14. class를 이용한 옛날 React 문법
15. 만든 리액트 사이트 build & Github Pages로 배포해보기

# Part 2 : 쇼핑몰 프로젝트

1. 새로운 프로젝트 생성 & Bootstrap 사용하기
2. 이미지 넣는 법 & public 폴더 이용하기
3. 코드 길어지면 import export 하면 됩니다
4. 저번시간 숙제 해설 (Card 컴포넌트 만들기)
5. 리액트 라우터 1 : 셋팅이랑 기본 라우팅
6. 리액트 라우터 2 : navigate, nested routes, outlet
7. 리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기
8. styled-components 쓰면 CSS 파일 없어도 되는데
9. Lifecycle과 useEffect 1
10. Lifecycle과 useEffect 2
11. 리액트에서 서버와 통신하려면 ajax 1
12. 리액트에서 서버와 통신하려면 ajax 2 : post, fetch
13. 리액트에서 탭 UI 만들기
14. 멋있게 컴포넌트 전환 애니메이션 주는 법 (transition)
15. props 싫으면 Context API 써도 됩니다
16. Redux 1 : Redux Toolkit 설치+장바구니 페이지 만들기
17. Redux 2 : store에 state 보관하고 쓰는 법
18. Redux 3 : store의 state 변경하는 법
19. Redux 4 : state가 object/array일 경우 변경하는 법
20. Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제
21. 리액트에서 자주쓰는 if문 작성패턴 5개
22. localStorage로 만드는 최근 본 상품 기능 1
23. localStorage로 만드는 최근 본 상품 기능 2
24. 실시간 데이터가 중요하면 react-query
25. 성능개선 1 : 개발자도구 & lazy import
26. 성능개선 2 : 재렌더링 막는 memo, useMemo
27. 성능개선 3 : useTransition, useDeferredValue
28. PWA 셋팅해서 앱으로 발행하기 (모바일앱인척하기)
29. state 변경함수 사용할 때 주의점 : async
30. Node+Express 서버와 React 연동하려면
31. React 강의 나가는 말

1. 글 입력

1) input 감지 :input onChange --- e.target.value

2) input 내용을  State저장 : let [input, inputSet] = useState(''); 

3) 글 array 앞에 추가 : 새 글발행. inputSet(인풋값)->copy.unshift(input)

2. 좋아요 버튼

3. 글 상세보기 : 모달창 props.post[props.postNo]

4. 수정, 삭제

5. 글 정렬

1. props 로 전달하기 중... 부모->props.color 로 background 요소 바꾸기
2. 컴포넌트에서 스타일 적용 : style={{background:props.color}}

import './App.css';
import React, { useState } from 'react';



function App() {
  let [post, postSet] = useState([
    '남자 코트 추천',
    '강남 우동 맛집',
    'useState() 독학',
  ]);
  let [like, likeSet] = useState([0,0,0]);
  let [modal, modalSet] = useState(0);
  let [postNo, postSetNo] = useState(2); // 클릭한 포스트 i 저장->props로 전달
  // let [sort, setSort] =useState(0);
  let [input, inputSet] = useState('');
  
    return (
    <div className="App">
      <div className='black-nav'>
        <h4>블로그임</h4>
      </div>
      <button onClick={()=>{
        let copy = [...post];
        // console.log(copy);
        postSet(copy.sort())
        // console.log(copy);
      }}>정렬</button>
        {post.map((a, i)=>{
          return (
      <div key={i} className='list'>
        <h4 onClick={()=>{
          postSetNo(i);
          modalSet(!modal);
        }}>{a}
          <span onClick={()=>{
            let copy = [...like];
            copy[i] = copy[i]+1;
            likeSet(copy); // ** array 자체를 교체!!!!
            }}>👍</span> {like[i]}
            <span onClick={(e)=>{
              e.stopPropagation();
              let copy = [...post];
              copy.splice(i,1); // shift(=move제거)
              console.log('copy.slice(i,1)')
              postSet(copy);
            }}> 삭제</span>
        </h4>
        <p>3월 17일</p>
      </div>
           )
        })}
      <hr />
      <span className='inputbox'>
        <input onChange={(e)=>{
          inputSet(e.target.value);
          console.log(e.target.value);
          }} />
      </span>  
        <button onClick={()=>{
          let copy = [...post];
          copy.unshift(input);
          postSet(copy);
        }}>글발행</button>
      
      {modal === true ? <Modal postNo={postNo} postSetNo={postSetNo} post={post} postSet={postSet} color={'yellow'}></Modal> : null}
    </div>
  );
}
function Modal(props){
  return (
    <div className='modal' style={{background:props.color}}>
      <h4>{props.post[props.postNo]}</h4>
      <p><input type="checkbox" />글발행: input onChange e.target.value</p>
      <p><input type="checkbox" />e.stopPropagation()</p>
      <p><input type="checkbox" />상세 내용: props.post[props.postNo]</p>
      <p><input type="checkbox" />부모->props.color</p>
      <p><input type="checkbox" />글 삭제 기능</p>
      <p><input type="checkbox" />버튼으로 글 정렬</p>
    </div>
    )

}
export default App;

.App {
  text-align: left;
}
body {
  font-family: 'nanumsquare';
}
.black-nav {
  display: flex;
  background: black;
  color: white;
  width: 100%;
  padding: 20px;
  font-weight: 600;
  font-size: 24px;
}

.list {
  margin-left: 20px;
  margin-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
}
.inputbox{
  margin-left : 30px;
  padding: 10px;
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eeee;
}

 

대충 원하는 기초까지는 했다. 자바스크립트도 겨우 1독한 상태긴 하지만, 예상대로 특히, ES6 문법 등은 리액트 학습으로 보완되고 익숙해지는 것 같다. 자바스크립트를 많이 강조해서, 자바스크립트를 처음 공부하면서 Deepdive 로 입문한 것이 후회된다. 효율은 낮고, 시간을 너무나 많이 빼앗겼어... 아 후회...막급.

쉬운 것부터 하고, 리액트 맛보기 더 한 후에... 보완하면서 학습했다면, 훨씬 빠르고 즐거웠을텐데..