꼭 깊은 복사를 해줘야 한다. 그래서 immer를 사용함!! immer를 사용하여 더 쉽게 불변성 유지하기 → 중첩된 걸 편리하게!!! immer를 설치하고 사용법 알아보기 설치 yarn add immer npm i immer immer를 사용하지 않고 불변성 유지 immer 사용법 import { produce } from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside = 5; }) 두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해 주면서 새로운 상태를 생성해 줍니다. 이 라이브러리의 핵심은 '불변성에 신..
WEB
컴포넌트 성능 최적화 const [todos, setTodos] = useState(createBulkTodos()); → 매번 렌더링 될 때마다 createBulkTodos(); const [todos, setTodos] = useState(createBulkTodo); → 최초 렌더링시 한번만 호출 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하면 됩니다. 그러나 함수 컴포넌트에서는 라이프사이..
css 사용yarn create react-app exam05 → yarn으로 할 때자손 조상} p .red { npm init react-app exam05 → npm으로 할 때 import ‘CSS 경로’ → 더 좋은 게 많아서 잘 쓰진 않는다. Sass 사용하기 ahacb 설명 Sass(Syntactically Awesome Style Sheets)(문법적으로 매우 멋진 스타일시트) CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 줍니다. 두 가지 확장자 .scss와 .sass를 지원 scss → 세미콜론 사용 가능, 중괄호 가능 ⇒ 개발자들은 sass보다 scss로 쓴다. .sass 확장..
use로 시작하는 함수 UseState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수 const [items, setItems] = useState(기본값); 상태를 설정하는 함수에 파라미터를 넣어서 호출하면 상태값이 변경되고 컴포넌트가 리렌더링 됩니다.setItems((기존 상태값) => …); setItems(값); useState를 여러 번 사용하기 useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 클래스형 컴포넌트의 componentDidMount와 ..
컴포넌트의 라이프사이클 메서드 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 이 메서드들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용될 수 있습니다. 라이프 사이클은 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 합니다 마운트할 때 호출하는 메서드 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다. constructor(props) { ... } getDerivedStateFromProps : props에 있는 값..
컴포넌트 컨테이너 컴포넌트 : 데이터 처리, 이벤트 처리, 여러 프리젠테이셔널 컴포넌트를 포함 프레젠테이셔널 컴포넌트 : 보이는 화면 구성 모델 데이터 관련 로직 exam03 폴더 만들기 yarn create react-app exam03 npm init react-app exam03 react-icons 다운 받기 yarn add react-icons npm i react-icons 컴포넌트 반복 자바스크립트 배열의 map() 함수 데이터 → JSX 형태로 변환 데이터 배열을 컴포넌트 배열로 변환하기 key key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다. key가 없을 때는 ..
ref: DOM에 이름 달기 ref는 어떤 상황에서 사용해야 할까? SPA(Single Page Application) DOM을 꼭 직접적으로 건드려야 할 때 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ref 사용 콜백 함수를 통한 ref 설정 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다. 이 콜백 함수는 ref 값을 파라미터로 전달받습니다. 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다. createRef를 통한 ref 설정 input = React.createRef(); input에 ref 달기 this.input=ref} ... /> 컴포넌트에 ref 달기 컴포넌트 내부에 있는 DOM을 컴..
React 에서 component 파일과 container 파일은 다른 역할을 한다. Component 파일: 화면에 보여지는 요소들(부분들), 데이터를 가공한다. (그래픽적으로 화면을 구성하는 UI 요소를 정의하는 곳 예를 들어 버튼, 폼, 카드 등의 화면 요소) Container 파일: 데이터 관리 부분을 담당한다. (UI 요소와 상태 로직을 연결하는 역할, 폼에서 입력된 데이터를 처리하고, API 호출을 수행하는 등의 상태 관리 역할) AddTodo.js import { MdOutlineAdd } from "react-icons/md"; const AddTodo = () => { //할일 등록 return ( ); }; export default AddTodo; TodoList.js import {..
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
yarn create react-app exam02 → yarn으로 할 때 npm init react-app exam02 → npm으로 할 때 onclick onClick={…} → 마우스 왼쪽 onContextMenu → 마우스 오른쪽 키 onsubmit onSubmit={…} event target currentTarget === this 리액트의 이벤트 시스템 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷함 이벤트를 사용할 때 주의사항 이벤트 이름은 카멜표기법으로 작성 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 DOM 요소에만 이벤트를 설정할 수 있음 div, input, …. 이벤트 핸들링 익히기 state에 input 값 담기 ..
