What I Learned Today

#keyword

#state

클래스형 컴포넌트에서의 state 초깃값은 객체의 형태를 넣어 주어야하지만
useState는 반드시 객체가 아니어도 상관없으며 자유형태

왜 state 를 사용해?
state는 변경되면 쓰던 html 은 자동 재렌더링 됨.
따라서 변동시 자동으로 html 반영되게 만들고 싶으면 사용하면 된다.

#array/object 특징

array/object 담은 변수에는 화살표만 저장됨
state가 array/object 이면 독립적 카피본(shallow copy)을 만들어서 수정해야한다.array를 수정했지 변수에 있던 화살표는 수정이 안된다.

#컴포넌트 만들기!

function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

-> 이후 <Modal></Modal> 으로 사용

어떤걸 컴포넌트로 만들면 좋을까?
반복적인 html 축약할때 , 큰페이지들 , 자주 변경되는 것들

#자바스크립트 map 함수 쓰는 법

모든 array 자료 우측엔 map() 함수를 붙일 수 있다. 콜백함수로 쓴다.

[1,2,3].map(function(){
	console.log(1)
})

map() 으로 같은 html 반복 생성 하는 법

let [글제목, 글제목변경] = useState([
    "겨울 옷 추천",
    "서울 맛집 추천",
    "도서 추천",
  ]);

{
	글제목.map(function(a, i){ 
//a 인자(파라미터)는 array 안에 있는 데이터
//i 인자(파라미터)는 반복문이 돌 때 마다 0부터 1씩 증가하는 정수
		return (
			<div className="list">
				<h4>{ 글제목[i] }</h4>
			</div>

		)
	})
}

---

1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행

2. 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력

3. return 오른쪽에 적으면 array로 담는다.

---

Code Snippets

[가나다순 정렬 버튼 만들기]

let [글제목, 글제목변경] = useState(["겨울 옷 추천","서울 맛집 추천","도서 추천",]);

<button
	onClick={() => {
		let copy=[...글제목]
		copy.sort();
		글제목변경(copy)
	}} >정렬버튼</button>

sort() 메서드의 특징 : 기본적으로 오름차순으로 정렬

---

Challenges Experienced

이제 자바스크립트 기본기 주차를 끝내고 드디어 기다리던 리액트 시작..
하나하나 알아가는 재미가 있지만 하나 알고 그 다음 것 알면 전에 것은 또 까먹고
열심히 손코딩하면서 외우고 있는데 그게 아닌 가 보다 보면서 하는 손코딩 눈코딩이 아니라 생각하는 코딩을 해야하는데 습관 바꾸기 쉽지 않다...!

좀더 논리적으로 생각하고 정리하며 떠먹는 코딩이아닌 나가서 사냥하고 요리하고 꼭꼭 씹어먹는 코딩공부를 하자..!