월요일 - 목표
📍ReactJS 숙련주차 수강
📍props, state 개념 정리
📍복습!
👀 알듯 말듯
강의를 들을땐 알듯말듯.. 실습하면 바보가 되는 나
▶️ css in js - styled components
CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식
패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램
yarn add styled-components - vscode 터미널에서 명령을 입력해서 패키지를 설치
``백틱을 이용해서 스타일링된 컴포넌트를 만들 수 있다.
조건부 스타일링 - classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있다. 박스 태그 안에 인라인으로 하나하나 스타일을 지정할 수도 있지만, 효율적인 관리를 위해 switch문과 map을 사용하여 리팩토링을 한 모습. 박스의 색을 배열에 담고, 색을 넣으면 이름을 반환해주는 함수를 만든다.
전역 스타일링 - 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용해야 할 필요도 있다. 그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다 라고 표현한다. 공통적인 부분은 페이지를 만들어서 import로 지정해준다.
▶️ css reset
다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기 때문에 이를 초기화하고 우리가 정하는대로만 표현하기 위해 초기화 하는 것
css 초기화하기
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
▶️ useState - 함수형 업데이트
일반 업데이트 방식 (batch로 처리) > 명령을 하나로 모아 한 번만 처리
vs
함수형 업데이트 방식 > 명령을 모아 순차적으로 한 번만 처리
왜 함수형 업데이트 방식을 사용할까? 불필요한 리렌더링을 방시하여 성능의 최적화를 이루기 위해
props를 이용하여 부모 컴포넌트에 있는 값도 자식 컴포넌트에 전달할 수 있다.
함수형 업데이트를 활용해 count,setCount 값 중에서 setCount 값만 전달하여 효율적으로 관리한다.
▶️ useEffect - 의존성 배열, 클린업 함수
useEffect는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.
컴포넌트가 렌더링 된 후에도 input필드에 값이 변경될 때마다 useEffect가 작동하고 있다.
의존성 배열 - 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것
[] - 빈배열을 넣으면 useEffect는 최초 렌더링 이후 딱 한번만 실행
[값을 넣은 배열] - ex) count를 값으로 넣은 상태. 버튼을 눌러 count가 될 때마다 useEffect가 실행된다.
▶️ React Router DOM
react-router-dom : 리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리
yarn add react-router-dom : vscode 터미널에서 아래 코드를 입력해서 패키지를 설치
Home,About,Contact,Works,Router 페이지 컴포넌트를 각각 생성.
Router - 브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분
생성한 Router 컴포넌트는 App.jsx페이지에 import해주어야 적상적으로 작동된다.
useNavigate - react-router-dom에서도 우리가 유용하게 사용할 수 있는hook을 제공한다. 그 중 useNavigate는 다른 페이지로 보내고자 할 때 사용할 수 있다. navigate를 선언하고 /를 사용해 원하는 페이지로 이동시킬 수 있다.
useLocation - 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다. 콘솔로그에서 확인가능
a 태그를 사용해야한다면 link를 사용하여 페이지를 이동한다.
props와 children을 사용하여 공통 레이아웃을 생성할 수 있다.
💭
내일 미니과제가 발제되어서 오늘 강의를 다 완강했다! 강의 내용이 노코드 웹플로우를 만들었던 페이지의 틀과 흡사해서 React로 이렇게 만들면 되겠구나! 하는 생각을 하면서 들었던것같다. 일단 강의를 다 완강하기는 했지만 제일 중요한 props랑 state부분이 많이 헷갈려서 복습을 더 많이 해야겠다.