리액트를 다루는 기술

컴포넌트를 페이지에 렌더링하는 역할파라미터첫 파라미터는 렌더링할 내용 JSX 형태로 작성두 번째 파라미터는 해당 JSX를 렌더링할 document 내부 요서 설정root는 public/index.html에 있음문자열 등 나중에는 완전히 사라지게 될 옛 기능을

최상단 폴더에 .pritterrc 파일 생성원하는 설정을 적는다.semi: 세미콜론을 붙여줌useTabs & tabWidth: 탭 말고 공백 두 칸으로 변경설정에서 'format on save' 체크하면 저장할 때마다 자동 적용

props에 전달받은 값이 없어도 오류 안 남component.defaultProps 후 객체로 설정사용한 component 사이에 내용을 넣으면 props.children으로 넘겨짐

PropTypes를 prop-types에서 importcomponent.propTypes = {} 로 사용(propTypes 소문자 주의)원하는 props의 타입 설정 가능isRequired를 이용해 필수요소 설정 가능(꼭 타입 먼저 설정해주고 뒤에 imRequired

import {Component} from 'react' 추가클래스 이름 옆 extneds Component 추가defaultProps & propTypes는 외부에 선언할도 있고 static을 사용해 내부에 선언할 수도 있음render() 안에서 함수형 컴포넌트와 같

input이 늘어나면 state를 객체로 만들어 변수 생성input name에 맞춰 key값 e.target.name의 value를 e.target.value로 변경(key는 로 묶어주기)setState 시 ... 스프레드 연산자 사용handleChange 하나로 모

mount 시 'mount effect' 호출 및 name 변수가 생성되므로 'effect'도 호출name 값 변경 시 'cleanup'을 출력 & 직전 name 값 출력unmount 시 'unmount cleanup' 호출 및 name 변수 사라지므로 'cleanup

reducer 함수 생성 후 switch로 action.type 별로 분류useReducer로 state와 dispatch 비구조할당첫 매개변수: 사용할 reducer 함수두 번째 매개변수: state의 초기값dispath()에 들어간 값으로 판별dispatch(e.t

useMemo로 쓸모 없는 연산을 줄여 성능을 최적화첫 매개변수: 콜백 함수로 실행할 함수 넣기두 번째 매개변수: useEffect와 같이 배열 안 변수가 변할 때만 작동

useCallback 등장 배경함수는 재 렌더링 시 값이 변하지 않아도 자동 생성렌더링이 많거나 함수의 종류가 많으면 성능 저하성능 향상을 위해 useCallback 사용useCallback 매개변수첫 매개변수: 실행할 callback 함수두 번째 매개변수: 로 변화

useRef 매개변수null을 넣어주는 이유는 빈 레퍼런스를 생성했음을 알려줌useRef로 만든 변수를 element의 ref 속성에 값으로 넣어주면 해당 element를 조종 가능useRef 변수.current를 꼭 붙여줘야함

hook을 직접 만들어 코드 정리 완성

sass는 세미콜론과 중괄호가 없음scss가 우리가 아는 css와 가까워서 난 scss가 더 좋음$를 이용해 변수 선언 / 사용할 때도 $ 붙여주기@mixin 사용하여 함수 생성 / 사용할 때 @include&는 부모 요소를 뜻함@import로 불러오기~ 표시는 nod

리액트에서 아이콘을 자유롭게 사용npm 설치 후 원하는 아이콘 import하여 태그에 적용홈페이지 주소(https://react-icons.github.io/react-iconsborder는 기본 테두리 / outline은 focus시 테두리&::placeho

min-height와 max-height로 최소 최대 높이 지정overflow-y: auto로 513px 넘어가면 스크롤바 생성flex의 align-items: center로 중앙 정렬&:nth-child()의 매개변수로 원하는 숫자나 식을 넣으면 해당 값에만 css

nextId는 useState가 아닌 useRef로 관리nextId는 렌더링 되는 정보가 아님예를 들어 화면에 보이지도 않고, 바뀐다고 해서 컴포넌트가 리렌더링 될 필요 없음(참조값)useRef 값은 .current 붙여주기onInsert 함수는 useCallback으

onClick={() => onRemove(id)}에서 onRemove 매개변수 여부에 따라onClick={onRemove}: 매개변수 없을 때onClick={() => onRemove(매개변수)}: 매개변수 있을 때

App.js에서 id와 일치하는 todo를 찾아 {...todo, checked: true} 변경일치하지 않는 todo는 그대로 두기

2500개의 데이터인 todos에 변화가 생기면 전체가 리렌더링 되어 성능저하'할 일 0' 체크하는데 한국인이라면 못 참을 렉이 걸림렌더링 시간도 50m는 뛰어갈 수 있는 328.7ms나 걸림그 이유는 '할 일 0'만 체크했는데 전체가 리렌더링 되기 때문. 의리 미쳤네

React.memo를 해줄 땐 리스트 아이템과 리스트 모두 적용해야 함(TodolistItem.js는 이미 적용함)리스트가 100개를 넘어가거나 업데이트가 자주 일어나지 않는다면 필수는 아님

TodoList.js TodoListItem.js TodoListItem.scss react-virtualized 사용 이유 현재 컴포넌트에서 첫 렌덩링 때 2500개 컴포넌트 중 대부분은 스크롤 하기 전에 보이지 않는데 렌더링 일어남(비효율) todos에 변동이

URL의 동적인 부분을 가져옴만약 App.js에서 '/profiles/:username/:age'로 변경하면 params = {username: '', age: ''}로 할당됨Home.js에서 동적 url 설정해줌velopert와 gildong은 data에 있기 때문에

http://localhost:3000/about?detail=true&mode=1pathname: 현재 주소의 경로(쿼리스트링 제외)http://localhost:3000/aboutsearch: 맨 앞의 ? 문자를 포함한 쿼리스트링 값?detail=

배열 타입 반환첫 원소쿼리파라미터를 조회하거나 수정하는 매서드들이 담긴 객체 반환get 메서드: 쿼리파라미터 조회set 매서드: 쿼리파라미터 업데이트쿼리 파라미터가 존재하지 않는다면 null로 조회두 번째 원소쿼리파라미터를 객체 형태로 업데이트 할 수 있는 함수 반환쿼

Outlet은 Route의 children으로 들어가는 JSX 엘리먼트를 보여줌위 코드에서 Artielces 위에 Outlet 추가만약 Outlet Route의 children이 많으면 해당 path에 맞는 children만 출력Layout이 들어갈 페이지들을 Layo

Link를 사용하지 않고 페이지 이동 가능navigate(-n): n만큼 뒤로 이동navigate(n): n만큼 앞으로 이동(앞으로 버튼 활성화 되어있을 시에만 작동)navigate('/page', {replace: true})따옴표 안에 페이지 경로를 직접 입력해도

Route path='\*'는 아무 텍스트나 매칭하다는 의미상단에 위차한 모든 라우트들과 매칭되지 않으면 해당 라우트를 실행한다.

Navigate는 로그인이 되어있지 않은 상태로 마이페이지에 접근하는 것을 막아줌replace: true를 작성해 기록을 남기지 않음(뒤로가기로 접근 방지)

useEffect 내부에서 async 즉시 실행함수를 작동Loading 값에 따라 대기 중... 뜰 수 있도록 returnarticles 값이 없으면 빈 화면 출력\_self(기본값): 현재 창에서 이동\_blank: 새 창에서 이동href가 필수로 있어야함프로퍼티 종

fixed를 사용하면 스크롤을 내려도 화면 상 고정한 곳에 위치다른 게시물을 가릴 수 있음Header의 children으로 Wrapper가 있는데 높이가 4remHeaderBlock이 끝나고 존재하는 공간 창출 컴포넌트Header를 넣고 그 아래 게시물을 작성했다.He