[React Blog 만들기] 코딩애플 강의 복습 1

 

* 유료 강의이므로 코드의 모든 내용을 올리진 않음

* 개인적으로 중요하다고 생각되는 부분만 올릴 예정(주로 function 부분)

* 당연하지만 강의코드와 작성자의 코드는 순서는 비슷하나 이름 등이 다름

 

 

 

 

[참고한 사이트]

1. css(이미지 정렬)

https://velog.io/@devzunky/wecode-5%EC%9D%BC%EC%B0%A8-TIL-div%EC%9A%94%EC%86%8C-3%EA%B0%9C-%EB%82%98%EB%9E%80%ED%9E%88-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-i6k1bw0n8v

1-1 리액트로 이미지 추가

https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 

2. react 정렬(버튼부분) 

https://codingbroker.tistory.com/41

https://hoyashu.tistory.com/88

 

 

 

 

[복습 결과물]

(1) 봄 ~ 겨울 옆에 💕 누를 경우 숫자 증가

(2) 제목 정렬하기 버튼 누르면 오름차순으로 제목 정렬

(3) 첫번째 제목 바꾸기, 두번째 제목 바꾸기, 전체 제목 바꾸기 누르면 제목 변경됨

 

app.js

function App() {
 
  let [title, titleChange] = useState(['서울 날씨', '부산 날씨', '인천 날씨']);
  let [season, seasonChange] = useState(['봄', '여름', '가을', '겨울']);
  let [heart, heartChange] = useState(0);
  let [heart2, heart2Change] = useState(0);
  let [heart3, heart3Change] = useState(0);
  let [heart4, heart4Change] = useState(0);
 
  function 제목정렬() {
    var newTitle = [...title];
    newTitle = newTitle.sort();
    titleChange (newTitle);
  }
 
  function 첫번째제목바꾸기() {
    var changeTitle1 = [...title];
    changeTitle1[0] = '강원도 날씨';
    titleChange(changeTitle1);
  }
  function 두번째제목바꾸기() {
    var changeTitle2 = [...title];
    changeTitle2[1] = '대전 날씨';
    titleChange (changeTitle2);
  }
  function 전체제목바꾸기() {
    var changeTitle = [...title];
    changeTitle = (['대구 날씨', '대전 날씨', '광주 날씨']);
    titleChange (changeTitle);
  }