📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 if문 for문 등에 넣어 조건적으로 호출되면 안 됩니다. 👉 if 문 return 뒤에 사용도 마찬가지입니다. 💡 함수형 컴포넌트나 커스텀 훅에서만 호출 가능 📍 Context API 속성 값을 하위 컴포넌트로 넘겨 사용할 경우, 컴포넌트 트리가 깊다면 속성값을 여러 컴포넌트에 걸쳐 넘겨줘야 하는 불편함이 있습니다. 이를 해결할 수 있는 방법으로 context API가 있습니다. import React, {useContext, createContext } from 'react'; const UserContext = createContext('unknown'); export default function App() { return ( 상단 메뉴 하단 메뉴..

💻 가상돔 매번 돔을 새로 반영하는 것은 비효율적이기에, 가상돔이 사용되는데요. 가상돔을 두어 이전과 비교한 다음에 "변경부분만 돔에 반영"되도록 해줍니다. 📍 JSX 리액트 요소트리 Json타입으로 컴포넌트에 key가 할당되고, 해당 값이 변경될때마다 초기화되어, unmount mount가 진행됩니다. JSX-> 리액트 요소 트리 : 화면의 한 순간을 나타내주는 가상돔으로 사용. { type: 'a' or Component함수, // Dom은 문자열, 컴포넌트는 함수 이름이 들어간다. key: key에 지정된 값, ref: '', props: { children, 다른 속성 키: 값 } //... } 📍 가상돔 렌더, 실제 돔 커밋 💡 렌더단계 렌더링마다 가상돔 만들어지고, 이전과 비교 💡 커밋단계 실..

👉 리액트 코드의 특징 일반 JS코드와 리액트를 사용한 코드를 비교해보면 아래와 같습니다. 🔹 일반 JS /*UI 구현코드*/ 추가 🔹 리액트 import React, { useState } from 'react'; export default function App(){ const [todoList, setTodoList]= useState([]); const [desc, setDesc]= useState([]); function onAdd(){/*생략 */} return( {/*UI 구현코드*/} {setDesc(e.target.value)}}/> 추가 ) } 🚩 일반 JS VS 리액트 일반 JS [명령형] 리액트 [선언형] ◾데이터 변경 코드와 UI코드가 혼합 ◾ 구체적인 DOM API사용으로 DOM..

상탯값과 속성값으로 관리하는 UI 데이터 리액트를 사용하지 않은 코드는 로직과 UI 코드가 복잡하게 얽혀 있어 가독성이 낮지만, 리액트를 사용하면 선언형 프로그래밍으로 코드를 작성하여 추상화 단계가 높으며 비즈니스 로직에 좀 더 집중할 수 있다. 화면의 갱신을 위해 UI 데이터는 반드시 상탯값(해당 컴포넌트가 관리하는 데이터)과 속성값(부모 컴포넌트로부터 전달받는 데이터)로 관리해야 한다. 자식 컴포넌트는 부모 컴포넌트가 렌더링될 때 같이 렌더링된다. 내려받는 속성값이 변경될 때만 렌더링되길 바란다면 React.memo를 사용할 수 있다. function Title(props) { return {props.title}; } export default React.memo(Title); 같은 컴포넌트를 두 ..

📘 중요하지만 헷갈리는 리액트 개념 이해하기 ✅ 리액트를 사용한 코드의 특징 const [todoList, setTodoList] = useState([]); // todoList -> 첫번째 아이템은 상태값 // setTodoList -> 두번째 아이템은 상태값 변경함수 useState를 사용하면 컴포넌트의 상태값을 추가할 수 있다. 매개변수는 상태값의 초기값 의미 (투두에서는 빈배열을 초기값으로 넣어줌) useState 는 배열을 반환한다. 상태값 변경함수를 호출해서 상태가 변경되면 리액트는 UI에 반영해준다. 배열을 표현할때는 key 값을 입력해줘야한다. 리액트가 화면을 효율적으로 업데이트 할 수 있다. 배열비구조화문법 비구조화문법은 각아이템을 변수로 만들 수 있다. const person = ['..

📘 리액트 프로젝트 시작하기 ✅ 리액트란 무엇인가? 페이스북에서 개발하고 관리하는 UI 라이브러리 리액트는 UI 기능만 제공 ( 앵귤러가 웹앱 개발에 필요한 다수의 기능을 제공하는 것과는 달리) 따라서 전역상태관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야한다. 전반전인 시스템을 직접 구축하기 때문에 자유롭다는 장점이 있지만, 개발 환경을 직접 구축해야하는 번거로움이 있다. 리액트 팀에서 create-react-app이라는 툴을 제공해서 어느정도 이 단점을 보완해준다. 프론트엔드 프레임워크를 사용하는 이유는? 자동으로 UI를 업데이트 해준다는 장점! UI = render(state) 라고 함축적으로 표현할 수 있다. render 함수는 순수함수로 작성하는 것이 좋다. - 순수함수는 입력값이 ..