⏳ 2023. 6. 5. - 2023. 6. 11. 제어 컴포넌트와 비제어 컴포넌트 reference : [강의안] 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트 : 리액트가 제어하는 폼 엘리먼트 비제어 컴포넌트 : 리액트로 제어되지 않는 폼 엘리먼트 폼 엘리먼트? Form을 구성하는 DOM 자체에서 상태를 가지는 DOM 엘리먼트(input, textarea, select) 리액트의 state가 아니라 DOM 자체의 state이기 때문에 리액트가 상태를 제어할 수 없다. 리액트가 DOM의 상태에 접근하려면 ref를 통해 접근해야 한다. 폼 엘리먼트가 아닌 다른 DOM 엘리먼트는 리액트의 state로 상태를 관리한다. 컴포넌트 내 직접 관리 부모로부터 props를 통해 상태 내려받기(상태 리프팅) 전역 s..
⏳ 2023. 5. 29. - 2023. 6. 4. 상태 끌어올리기 부모 요소에서 자식 요소의 상태를 알아야 하는 경우, 상태 리프팅을 할 수 있다. 상태를 관리하기 위해 리프팅을 많이 하면 그만큼 드릴링(반대의 개념)을 야기하니 조심해야 한다고.. 한다. 다음은 상태 리프팅의 예시이다. 부모 요소에서 id, password값을 직접 관리하고 함수를 넘겨주는 방식으로 값을 알아내는 방법이다.
⏳ 2023. 5. 29. - 2023. 6. 4. 스타일과 DOM 리액트의 스타일은 props 데이터를 주는 것으로 작성할 수 있다. js와 굉장히 유사하나, class를 className으로 주는 것이 관례이다. js의 getElementById, querySelector처럼 리액트에는 useRef가 있다. 사용하고자 하는 요소에 ref값을 적용하는 것으로 요소를 선택할 수 있다. Error js에는 try catch문을 사용하여 error에 대처할 수 있는데, 리액트는 에러에 어떻게 대응할까? 바로 ErrorBoundary 컴포넌트를 사용하는 것이다. 일부러 에러를 발생시키고, ErrorBoundary 컴포넌트를 사용해보자. 에러가 나올 수 있는 컴포넌트를 ErrorBoundary 컴포넌트로 감싸주..
⏳ 2023. 5. 29. - 2023. 6. 4. 컴포넌트 상태 저번 시간까지 전역 변수를 만들어 바뀌는 값을 처리했는데, 사실 리액트는 useState를 통해 상태를 관리할 수 있다. 저번 시간의 상태 관리를 useState를 통해 만들어보자. 컴포넌트 사이드 이펙트 변경이 일어날 때, 다른 곳에서도 부수적인 효과를 주기 위해 사용하는 훅 useEffect useEffect를 사용하여 localStorage에 저장하는 효과를 만들어보자. 동기적인 처리를 위해 useState의 인수로 함수를 전달할 수 있다. useEffect의 두 번째 인자는 의존 배열인데, 3가지 상황이 있을 수 있다. 아예 없는 경우 : 컴포넌트가 리렌더링될 때마다 호출 빈 배열인 경우 : 처음에만 호출 의존값이 있는 경우 : 처..
⏳ 2023. 5. 29. - 2023. 6. 4. 리렌더링 js로 작성한 코드는 변경 사항이 있는 경우, 요소를 처음부터 다시 생성해서 변경된 내용을 적용한다. 이러한 방식은 Reflow, Repaint에서 최적화 고민의 원인이 된다고.. 한다. 그렇다면 리액트는? React 엘리먼트는 불변객체인데, 어떻게 바꿔? -> 변경 사항이 있으면 재조정을 통해 변경 사항을 적용한다. 바뀐 부분만 골라서 리액트가 알아서 바꿔주기 때문에 굉장히 편하다~ 이벤트 핸들링 js와 거의 똑같지만.. onEvent를 카멜케이스로 작성한다. 다음은 전역 변수로 상태 객체를 선언하여 검색창을 만든 예시이다.
⏳ 2023. 5. 29. - 2023. 6. 4. 라이브러리 vs 프레임워크 라이브러리는 개발 편의를 위한 도구의 모음(공구), 프레임워크는 기반 구조까지(공장) 잡혀 있다. 리액트는 공식 문서에 라이브러리로 소개하고 있고, 이제부터는 리액트에 대해 알아보자! DOM 다루기 CodeSandbox https://codesandbox.io/ CodeSandbox: Code, Review and Deploy in Record Time CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time. cod..