가보자구!

외부 라이브러리없이 React가 제공하는 훅만으로 상태관리를 구현하기 위해 사용한다. 함수형 컴포넌트에 상태를 두고, 여러 컴포넌트간 데이터와 데이터 변경 함수를 공유하는 방식으로 상태를 관리하게 된다. useState 단순한 하나의 상태를 관리하기에 적합하다. const [ state, setState] = useState(initState| initFn) state가 바뀌면, state를 사용하는 컴포넌트를 리렌더한다. useEffect와 함께, state에 반응하는 훅을 구축한다. useState를 활용한 상태 관리 상위 컴포넌트에서 state와 state변경 함수를 정의하고, 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려주는 패턴이다.(state를 조작하는 함수를 하위 컴포넌..

개념정리/React 2023. 12. 3. 16:55

Routing 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. React-Router를 사용하는 이유 SPA 사용자 경험을 향상시키기 위함이 가장 큰 이유인듯하다. Router Dom Router Dom이란 URL의 링크에 따라 Component를 생성해주는 것이다. SPA(single page application)인 React에서 하나의 URL 링크로 사용자에게 페이지를 보여줄 수 있다. 하지만 사용자가 특정 페이지로 이동하고 싶지만, 그럴수 없는데 이때 Router Dom을 사용하는 것이다. 하나의 URL로써 SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면 특정 페이지 즐겨..

개념정리/React 2023. 12. 3. 16:48

❓css-in-js와 styled-components이 상당히 유사해 보여서 혼동!! 자세한 차이를 알고 싶음❓ CSS modules CSS Modules에서는 스타일을 정의한 CSS 파일의 클래스 이름들이 객체로 변환되어 자동으로 생성된 모듈에 들어가게 된다. 컴포넌트에서는 이러한 클래스 이름을 사용하여 스타일을 적용한다. /* styles.module.css */ .container { padding: 16px; background-color: #f0f0f0; border: 1px solid #ccc; } .text { color: blue; font-size: 16px; } ➕ 이 CSS들이 styles객체로써 js파일에 import되어지고 사용할 때도 객체에서 값을 찾아오는 방식으로 사용해야 함!..

개념정리/React 2023. 11. 26. 16:47

🔴 Hooks 🔻State Hook(useState) 🔻Effect Hook(useEffect) 🔻useMemo 🔻useCallback 🔻useRef Hook 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스컴포넌트의 기능을 구현하기 위해 React 16.8버전에 추가된 것이 바로 Hook이다. 즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 ..

개념정리/React 2023. 11. 26. 16:37

🔴props 🔴Props 추출 props 컴포넌트간의 정보교환/교류 방식, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달 import React from 'react'; // 자식 function Son() { return 나는 아들입니다.; } // 엄마 // Mother -> Son 으로 정보를 전달했다. function Mother() { const name = "흥부인"; return ; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보..

개념정리/React 2023. 11. 19. 15:12

🔴Element Rendering 🔻ReactDOM.render() 🔴React.createElement() React React 요소는 변경이 불가능하다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없다. (특정한 시간대의 UI를 보여줄 뿐) 그래서 UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render() 로 전달하는 것이다. ReactDOM React DOM이란, Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다. React DOM에는 리액트 엘리먼트를 브라우저에 렌더링 하는 데 필요한 모든 도구가 들어 있다. ReactDOM.render() element는 리액트의 가장 작은 단위이다. ReactDom.rend..

개념정리/React 2023. 11. 19. 14:55