과제 요구 사항

중요

- 달력 헤더 
	- 타이틀, 햄버거 버튼, 요일

- 바디 
	- 달력 날짜 
		- 그 안에 헤더 리본, 숫자, 

- 푸터 
	- 본인 이름 로고 ex) 경일 아카데미


- 함수형 컴포넌트 
- 버튼 누르면 달력 보이기 
- 빨간날은 표시 안 하고 있다가, 빨간날 표시 버튼 누르면 보이게 하기 
- 해당 날짜 누르면 색 변하게 하기 

◼ 햄버거 버튼 누르면 -> 밑에 body 보이게 하기

구분		설명	비고
햄버거 버튼 누르면		header 에 있을 것 임
		onClick 문법이 어떻게 되는지 예제를 봐야 함
onClick 예제✅		<button onClick={clickHandler} > 클릭 </button>	이렇게 하면 됨. 이건 클래스형이랑 크게 차이가 없음
클릭하면 -> state 의 상태를 바꿔야 해		이걸 어떻게 바꾸지? state 변경 문법을 다시 봐야 할듯
UI 만들어놓기		오캐이 이건 했음.
state 변경 문법 (UI 의 현재 상태를 state 에 저장하기)	state 저장
	부모에게서 얻을 수 밖에 없는 클릭 데이터에 따라 -> state 가 변경되는지 확인
실제 UI 를 NULL 로 지울 때, 누가 컨트롤 하게 할거야?	음... 우선, 자식이 하게 하자
	그러면, 'PROPS' 로 전달해야해!
함수형 컴포넌트에서 PROPS 문법	부모에서
		<Mycom3 newnum = {1} newnum2 = {2} />
	자식이 받는 법 (1) 구조 분해 할당 해서 받기 2) 일반적으로 받기)

🚀 props 문법 좀 더 공부하기

구분	설명	비고
부모가 보내는 법	구조할당하는 경우
	구조할당 안 하는 경우
자식이 받는 법	구조할당 하는 경우
	구조할당 안 하는 경우

◼ 날짜를 자동으로 생성되게 하기

• 이걸 응용해서

[포인트] 
1. 글제목(그려주고자 하는 배열통) 은 useState 에서 가져온다. | 그래서, 기본적으로 저장해둔 state 가져와서 쓴다. -> 배열이 변경되면 자동으로 변경될거야.
2. map 에서 item, index 이렇게 해서 만들어주면 됨 

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(item, index){
          return (
          <div className="list">
            <h4>{ 글제목[index] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

◼ 음... 날짜 있게 하긴 했는데, 요일 반영이 안 되네... | 이 부분 보완하는게 필요함 ⭐⭐⭐⭐⭐

• 이렇게 하긴 했는데, 문제점들이 있어

1. 앞에 날짜를 너무 수동으로 넣었어 
2. 31일 이것도 너무 수동으로 margin 으로 움직였어
3. 요일이랑 날짜 각 맞추는 것도 ㅠㅠ 

◼ 날짜 누르면, 색 변하게 하기

• 생각해볼 것

1. 색을 변화하게 하는 곳은 어디인가. 색 변화 명령어는 뭔가 

2. 클릭 데이터가 들어가는 곳과 -> 그곳 까지 어떻게 이어줄 것 인가. 

3. 딱 그것만 변하게 할 때, mycom3 에서 배운, 특정한 것만 변화하게 하는 것, 은 어떻게 활용될 수 있는가. 

음... 이걸 하려면, 우선, 날짜들을, map 함수를 써서 만들어야 할거 같은데 

✅ 우선, 날짜를 map 함수 써서 자동화 하고, 그 다음 색 변화 하러 가기

구분	설명	비고
색 변화가 일어나는 곳은?

• 음... 변하긴 하는데, 두번 클릭해야 변하는데? ❓❓❓❓❓❓❓❓

이게, 그... 생명주기 함수랑 관련된건가? ❓❓❓❓❓❓❓❓❓ 

◼ 빨간날 보이고, 안 보이게 하기

div 로 기본 칸을 만들면, 없앴을 때, 나머지 숫자들이 그 공간을 메운다. 
그게 문제다. 

주말, 칸을 없앴을 때, 숫자들이 버티고 있어야 하는데, 빈 곳을 다른 숫자가 채운다. 

방법은 이렇게 각각 만들기?

1. 평일 + 주말 버전 
2. 평일 버전

우선, 목차를 평일 버전, 먼저, 만들어보자.

head 에서 클릭하면 -> nav 에서 요일 변하게 하자 

• 평일
  

• 주말
  

이렇게 변화하긴 함 
음... 문제는 '7월' 말고, 8월, 9월을 표시한다고 할 때, 이 방식은 오래 가지 못 한다 ㅠㅠ 

✅ 보완할 점

1. row 와 column 레이아웃을 짤 때, 좀 더 깔끔하게 짜고 싶다.

2. 삼항 연산자를 사용하거나, 조금 더 리액트 스러운 코드 를 짜고 싶다.

'그냥 작동한다.' 에서 멈추는게 아니라, 
이제 더 깔끔하고, 더 좋은 코드를 짜고 싶다는 생각이 든다. 

3. 현재, 날짜 변경할 떄, 두 번 클릭 해야, 변한다. 이건, componentDidUpdate 의 문제인지 확인해봐야 한다.