React (17) 썸네일형 리스트형 [React] immer # immer 는 불변성을 유지하는 작업을 매우 간단하기 처리하기 위해 쓴다. 불변성이란? - 코드상에서 기존에 값을 수정하지 않고 새로운 값을 만들어내야 한다는 의미를 불변성이라고 한다. 예시) import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside = 5; }) produce 라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수입니다. 두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해.. 컴포넌트 성능 최적화 - 컴포넌트의 리렌더링을 방지할 때 - class 형 컴포넌트 => shouldComponentUpdate 라는 라이프사이클을 사용합니다. - 함수형 컴포넌트 => 함수형 컴포넌트에서는 라이프사이클 매서드를 사용할 수 없기 때문에, React.memo 라는 함수를 사용합니다. 사용법은 컴포넌트를 만들고 나서 감싸 주기만 하면 됩니다. Todo-App 만들기 - 저장용 - yarn add node-sass classnames react-icons - vscode 에서 사용되는 prettierrc 설정 - 컴포넌트가 vs code 에서 다른 탭으로 열려 있지 않으면 자동 완성이 작동하지 않으므로, 닫힌 파일에도 자동 완성이 제대로 작동하기 위해 프로젝트 최상위 디렉터리에 jsconfig.json 파일을 만들어 줍니다. # 환경설정 완료 - ToDoApp 만들기 - React 환경에서 src 폴더안에 해당 파일들을 넣어준 후 작동한다. [React] Hooks - 함수형 컴포넌트 - useState : 가장 기본적인 Hook 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 배열로 사용할 때, 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다. - useEffect : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다. useEffect(() => { console.log('~'); }, [] ); 뒤에 [] 를 넣어서, 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행할 수도 있으며, [ ] 안에 파라미터를 넣어, 해당 파라미터에 변경되는 점만을 캐치해낼 수도 있습니다. .. [React] Class 컴포넌트에서 ref 에 대한 정리 - 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용합니다. - HTML 에서 id 를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref ( reference의 줄임말 ) 개념입니다. - 리액트 컴포넌트 안에서는 id를 사용하면 안 되나요? 특수한 경우가 아니면 사용을 권하지 않습니다. 예를 들어 같은 컴포넌트를 여러번 사용한다고 가정해볼 때, HTML에서 DOM의 id는 유일(unique)해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기니 잘못된 사용입니다. ref 는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않습니다. - ref는 'DOM을 꼭 직접적으로 건드려야 할.. 이벤트와 매서드에 관하여 1) 클래스형 컴포넌트 매서드와 이벤트 관련 React 코드입니다. 역시 이 부분에서 state 의 강점과 코드에서 쓰이는 이해도가 눈에 잘들어왔습니다. 추가적으로 여러개의 state 를 사용하려 할 때 [e.target.name] 을 지정하여 여러 HTML DOM 이벤트속에서 python 의 키 : 밸류 형태로 기능을 다룰 수 있다는 점이 저에게 있어서는 굉장히 편리하고 React의 강점이 아니였나 싶습니다. 2) 함수형 컴포넌트 매서드와 이벤트 관련 React 코드 함수형 컴포넌트로 매서드와 이벤트를 짤 때에는 DOM 요소의 name값을 form 이라는 객체로 형상화하여 다뤘다는점이 이색적이였고, nextForm 에서도 기존값을 복사하여 쓰는 실습을 할 수 있어서 더욱 React에 대한 깊이가 깊어졌.. State - 클래스형 컴포넌트가 지니고있는 state - 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state 1) 클래스형 state - 알아야 할 점 1. constructor : 컴포넌트의 생성자 메서드, 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 2. this.setState - constructor 적용 클래스형 state 코드 2) 함수형 컴포넌트에서 useState - 알아야 할 점 1. 배열 비구조화 할당 2. useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 한다고 배웠지만, useState 에서는 반드시 객체가 아니어도 상관없습니다.. propTypes 를 통한 props 검증 컴포넌트의 필수 props 를 지정하거나 props 의 타입(type) 을 지정할 때는 propTypes 를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 import 로 propTypes를 불러옵니다. 그리고 이렇게 propTypes 라고 지정해주고, PropTypes.(지정할타입) 을 정해준다면 메인에서 해당 타입에 맞는 값이 들어왔을 때에만 올바르게 작동합니다. 다른값이 들어왔을 때에는 오류 반환 isRequired를 사용하여 필수 propTypes 설정도 가능합니다. 이 처럼 코드를 작성하고 메인에서 numnumber 에 값을 주지 않을때에는 웹에서 콘솔로그에는 오류를 반환하고, 메인App.js에서 numnumber에 올바른 값을.. 이전 1 2 3 다음
