TIL. React. 리액트 기초반 2주차. <22.03.20>

해야 했던 일

• 3주차까지 독파

---

오늘 공부한 코드

https://github.com/hyoungwonkang/TIL/commits/main

배운것들

네모 여러개 만들기

• (1) 새 CRA 만들기
• (2) App.js를 class형 컴포넌트로 바꾸고 시작!
• (3) state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기
  • Array.from() 자세히 알아보기→

    // 배열을 만듭니다.
    // Array.from()은 배열을 만들고 초기화까지 해주는 내장 함수입니다.
    // Array.from()의 첫번째 파라미터로 {length: 원하는 길이} 객체를,
    // 두번째 파라미터로 원하는 값을 반환하는 콜백함수를 넘겨주면 끝!
    // array의 내장함수 대부분은 콜백 함수에서 (현재값, index넘버)를 인자로 씁니다.      

• (4) 더하기, 빼기 버튼을 만들고,
• (5) 함수를 만들어서
• (6) 연결하자!

가상DOM과 DOM을 비교하기 위한 값은 key

• 리액트에서 key값은 자동으로 들어가지만 크롬 element탭에서는 안 나옴
• 실제 DOM에 들어가는 속성이 아님. 리액트 요소들만 key를 갖고 있음
• key는 랜덤하게 들어감. 그래서 map에서는 오류.
• map: 리턴을 갖는 함수. 요소들을 또 만듬. 그래서 결국 key값이 다 다름
• 그리하여 key 값을 i(인덱스)로 임의 지정.

오늘의 키워드들

단방향 데이터 흐름: 부모 -> 자식
양방향은 렌더링 무한루프에 빠지기 쉽다.
리액트 요소 임을 보여주는 <></>태그
리액트는 순서대로, 만들어가는 과정 되짚는게 중요 (console.log)