[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기 11주차 4LS 회고 (Props, useState, Router, Styled-Components)

 ❤️‍🔥 Liked

• 요즘 React 수업은 재현님이 반복 학습을 진행하고 있다. 추가로 코어자바스크립트의 지은이 재남님이 번역하신 React 공식문서를 읽으면서 보완학습을 진행하고 있어서 Component, Props, State에 대한 개념은 어렵지 않게 잡을 수 있었다. 리액트 라이브러리의 사용 목적이 재사용성을 위해 상태에 따라 컴포넌트를 사용자 정의 요소로 표현하는 것이므로 동작 원리에 대한 개념을 잡는 것을 중점으로 공부하고 있다.
• 프로젝트 조편성을 위해 객관식문항을 비롯한 간단한 코딩 테스트를 진행했는데 시간 내에 Javascript 동작이 되도록 구현은 해냈다. 코드 품질은 개선해야겠지만 열심히 순서도를 그리는 연습을 했던 결과가 돌아온 것 같아서 뿌듯!
• React도 JS 기반의 언어이다 보니 JS 문법이 나올 때가 많은데, JS만 공부할 때는 어렵다고 넘어갔던 구조분해할당과 같은 기술이 손에 익숙해지는 기분이라 좋다. 구조분해할당에 대한 보완 학습 문서는 모던자바스크립트를 추천 https://ko.javascript.info/destructuring-assignment

 

 

 💣 Lacked

• 병아리반 스터디에서 카드 뒤집기 미니게임을 만들었다.
  "DOM으로 카드 요소를 생성하고, forEach로 순회하면서 클릭이벤트가 두번 발생하기까지 innerText를 비교한 후 결과를 반환하고  초기화한다." 간단하게 생각했는데 만들다 보니 잘 되지 않아서 유튜브를 보면서 코드를 보완했다. 🥹
  return을 실행해야하는 코드, 초기화가 필요한 부분, 예외처리에 대한 문제 때문에 한참 헤맸는데 덕분에 배운 것도 많았다...~
  고 생각하고 싶지만 너무 느릿느릿... 
• React 재미는 있는데 실습이 부족해서 잘 못하면 겉핥기 식으로만 배우고 넘어갈 것 같다. 실습을 더 많이 해봐야 할 것 같다.

GitHub - JAYCODE-git/minigame: 레트로 미니게임 모음집

 

 

 

 ✏️ Learned

• 컴포넌트가 여러 엘리먼트를 동시에 return 해야 할 경우 에러가 발생.
  Fragements 를 사용하면 별도의 노드를 추가하지 않고 여러 개의 자식을 감싸줄 수 있다. <> </> 단축 속성으로도 사용 가능.
• 컴포넌트의 이름을 지을 때는 첫 글자를 대문자로 작성해야 컴포넌트로 해석된다.
• props는 컴포넌트를 만들 때 넣어줄 수 있는 속성의 집합. 문자열 숫자형 JSX 까지 다양한 데이터를 넘길 수 있다.
• JSX 안에서는 어떠한 JS 문법도 사용가능하므로 구조 분해 할당을 통한 props 전달도 가능.
• React는 컴포넌트가 업데이트될 때마다 Virtual DOM을 사용하여 컴포넌트 트리를 비교하는 작업을 통해
  변경된 상태만 업데이트하고 나머지는 그대로 유지함으로써 DOM 조작을 최소화하고 빠르고 효율적인 APP을 만든다.
• React는 state(상태)변경을 감지하고 reconciliation(재조정)하는 프로세스를 통해 컴포넌트를 업데이트하여 즉각적으로 반응하는 사용자 인터페이스를 만드는 것.
• React에 상태 변화를 전달하기 위해 state 변수와 state 상태를 바꿔줄 수 있는 함수로 구성된 useState라는 Hook을 사용
• React에서도 .map() method는 리스트 내부의 모든 요소를 순회하며 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 
• 컴포넌트 안에서 리스트를 렌더링 할 때는 꼭 key 값을 넣어줘야 상태 변경 시 변경된 요소만 새로 랜더링 할 수 있다.
  key 값은 동일한 컴포넌트 리스트에서만 유일해야 하며 일반적으로 배열의 id 값을 넣어준다.
• Styled-Components는 CSS in JS 관련하여 가장 인기 있는 리엑트 라이브러리.
  React에서 따로 Css 파일을 만들어 import 해줄 필요가 없으며
  scss문법을 활용할 수 있으며 props에 따라 조건부 스타일을 적용할 수 있다는 장점이 있다.
• 구글로봇 등 검색엔진이 사이트를 탐색할 때 URL을 통해 색인 작업을 하는데
  React는 SinglePageApplication이기 때문에 사이트 노출이 어려운 단점이 있다.
  SPA의 단점을 보완하기 위해 Router을 사용하면 url을 인식해서 ServerSideRendering처럼 구현되기 때문에 Crawling이 가능.
• /:id는 동적 라우팅을 위해 사용되는 URL 패턴. useParams() Hook과 함께 사용.
• Route가 중첩되어 있으면 하위요소에 상위 요소의 url/ 뒤의 문자열을 정의하면 된다. 

 

 

 

 👩🏻‍💻 Longed For

• 10km 러닝
• 모던 JavaScript 튜토리얼, 파트 2 문서 단락 숙지
• 회고조 React 공식문서 스터디 참여.
• 프로그래머스 0단계 문제 매일 2개씩 풀기.
• 리액트 공식문서 틱택토 풀어보기.
• 미니게임 취합하고 리드미 작성해서 github 업로드.
• 위니브 React 강의자료 보고 실습해보기.