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

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

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

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

 

 

[참고한 사이트]

react state, props 사용법

https://velopert.com/921

css

https://velog.io/@anrun/CSS-%EC%9C%84%EC%B9%98-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0position-float-inline-block-hyk5xn5nql

 

 

[복습 결과물]

(1) [ 날씨 기준 ]⭐0 밑 날씨 정보 map을 이용하기(array에 있는 내용들을 불러온 것)

(2) 오늘의 날씨 버튼 열고 닫기, 날씨 변경하기(랜덤은 아님, 지정된 배열의 숫자 변경으로 값 불러옴)

(3) Modal1 열고 닫기, Modal1의 제목 변경(서울, 부산, 인천 날씨라는 제목 클릭 시 변경됨)

(3)-1 서울, 부산, 인천 날씨 글을 map을 이용하기(<div> 요약)

 

 

 

app.js

function App() {
 
  let [title, titleChange] = useState(['서울 날씨', '부산 날씨', '인천 날씨']);
  
  let [weather, weatherChange] = useState(['맑음', '흐림', '비', '눈', '장마', '천둥번개'])
  let [star, starChange] = useState(0);
 
  let [pushTitle, pushTitleChange] = useState(0);
  let [pushWether, pushWetherChange] = useState(0);
 
 
  function Modal1(props) {
    return (
      <div className="modal1">
      <h3>제목 : { props.title[props.pushTitle] }</h3>
      <p>상세내용 : { props.weather[0] }</p>
      </div>
    )
  }
 
  let [modal1, modal1Change] = useState(false);
 
  function Today(props) {
    return (
      <div className="today">
        <h3>오늘의 날씨 : { props.weather[props.pushWether] } </h3>
      </div>
    )
 
  }
 
  let [today, todayChange] = useState(false);
 
    return (
        //삭제함
  );
}
 
export default App;