Graph 공부하는 학생

context API 맥락 API가 무엇일까요? react 앱을 만들게 되면 가장 중요한 것은 상태 값을 관리하는 것입니다. 컴포넌트가 많아지고 그 사이에 관계가 많아지면 구조가 복잡해집니다. 이 때, 전역(global)하게 상태를 관리해주는 API가 필요합니다. 그 역할을 해주는 것이 context API입니다. context API 예제 //createContext() 메소드를 이용해서 context를 생성 const context명(컴포넌트처럼 사용하기 때문에 첫글자를 대문자로) = createContext(context의 초기값); createContext(context의 초기값); //Provider로 context의 데이터를 제공 //Consumer로 제공받은 데이터 사용 //context를 ..

useCallback useCallback은 렌더링 성능을 최적화할 때 사용하는 Hook이라고 할 수 있습니다. 컴포넌트에 정의해놓은 메소드를 렌더링될 때마다 재생성되는데 useCallback을 이용하면 메소드들이 재생성되는 것을 방지합니다. 또한, useCallback 정의해놓은 메소드의 재사용성을 높일 수 있으며, 메소드가 생성되는 시점을 정할 수 있는 장점이 있습니다. const 메소드명 = useCallback(() => { //메소드의 동작 구현 //최초 렌더링 시에만 메소드 생성, 상태변수 값을 줘서 상태변수가 변할 때마다 메소드를 재생성 }, []); useMemo useMemo는 연산을 최적화해주는 Hook입니다. 상태값이 변할 때만 연산이 이뤄지도록 지정할 수 있어서 불필요한 연산이 일어..

Hooks 여러분 후크 선장을 아십니까? 뜬금없지만 가끔 후크하면 피터팬에 나온 해적 선장이 떠오르곤 합니다. 손에 달린 갈고리 같은 것을 장착한 후크 선장을 생각해봤습니다. 거기에 s가 붙어있네요. 여러개의 갈고리로 생각해보고 접근해보겠습니다. 기존 react에서는 클래스형 컴포넌트로 개발이 주로 이루어졌습니다. 함수형 컴포넌트에는 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 없었습니다. 그런데, Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 추가되었죠. 현재는 대부분 함수형 컴포넌트 위주의 개발을 하게 됩니다. 이 Hooks는 컴포넌트의 상태관리 변수를 생성하는 useState가 있고, 렌더링 직..

Component 컴포넌트는 react에서 화면을 구성하는 하나의 요소입니다. 헤더, 메인, 메뉴바, 기사목록 등 화면을 하나의 컴포넌트로 구성할 수 있습니다. 무자비하게 마구 분리한다면, 너무나 많은 파일이 만들어지므로 적당하게 크기를 잡고 컴포넌트를 지정하는 게 필요합니다. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 현재는 함수형 컴포넌트를 사용하도록 권장하고 있습니다. https://react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function PureComponent – React The library for web and native user inter..

리액트(React) 기존 HTML로 구성된 화면은 페이지를 이동하거나, 데이터가 변경되면 새로운 HTML 파일을 불러와서 화면에 표출하는 방식으로 MPA 기반입니다. MPA(Multi Page Application) 이에 반해 react는 SPA(Single Page Application) 방식입니다. HTML 파일은 하나만 사용하고 페이지를 이동하거나 데이터가 변경되면 HTML 파일에 있는 태그를 삭제하고 새로운 태그를 렌더링하는 방식을 사용합니다. react는 앞서 사용한 HTML, CSS, JS의 사용은 편하게 하고 오직 화면단만 신경쓸 수 있도록 돕는 프론트엔드 라이브러리 입니다. 또한, 사용하기에 앞서 Html, Css, Javascript는 기본적으로 숙지가 되어있어야 합니다. 왜 그런지는 아..