빵 입니다.

🔥함수형 컴포넌트 기반으로 정리를 했습니다! Side effects를 수행하기 위해 사용되는 Hook Side effects는 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등과 같은 작업을 말한다. useEffect는 컴포넌트 렌더링 후에 실행되는데, 이는 렌더링 결과가 화면에 이미 반영된 후에 Side effects를 수행할 수 있게 해준다. useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 컴포넌트 생명 주기 관련된 여러 시점에서 Side effects 를 실행할 수 있다. useEffect(() => { // Side effects를 수행하는 코드 // 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등 // clean-up 함수 (선택적) return () => { // c..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! ref는 다른 DOM 요소에 접근하고 조작할 수 있게 해준다. 리액트 16.3 버전 이상에서는 함수 컴포넌트에서 useRef 훅을 사용하여 ref를 생성할 수 있다. 리액트가 JSX 코드를 렌더링 할 때, ref 객체에는 실제 DOM 요소나 컴포넌트의 인스턴스가 저장된다. 저장된 값은 항상 객체이고, current 속성을 가지고 있다. current 속성은 ref가 연결된 실제 값을 갖는다. 어떤 HTML 요소에도 추가할 수 있는데, 입력 필드 내용을 가져오기 위해 주로 input에 많이 사용한다. import React, { useRef, useEffect } from 'react'; const MyComponent = () => { const myInput..

DOM 트리의 특정 위치에 컴포넌트를 렌더링하기 위한 API React 애플리케이션에서 모든 컴포넌트는 동일한 부모 컴포넌트 내에서 렌더링되는데, 특정 UI 요소를 다른 DOM 요소의 위치로 렌더링해야 하는 경우엔 ReactDOM.createPortal을 사용한다. (특히 모달, 툴팁, 드롭다운 메뉴 등의 UI 요소를 더 상위 수준의 DOM 노드에 렌더링하려는 경우에 효과적이다.) Portal은 React 컴포넌트 트리를 따라가는 것이 아니라 다른 DOM 위치로 React 컴포넌트를 렌더링하는 데 사용되기 때문에 react-dom에서 제공하는 createPortal을 이용해 만든다. createPortal 함수는 첫 번째 매개변수로 렌더링할 React 요소와 두 번째 매개변수로 해당 요소를 삽입할 DOM..

📌 인라인 스타일 /* 일반 속성 */ /* 하이픈(-)으로 연결된 속성 */ /* 조건에 따른 스타일 적용 */ const [isValid, setIsValid] = useState(false); 📌 클래스 const [isValid, setIsValid] = useState(false); 📌 CSS 모듈 방식 사용 CSS를 사용할 때 로컬 스코프에 해당하는 독립적인 모듈로 만들어 사용하는 방식 스타일을 컴포넌트와 분리하여 관리할 때 주로 사용한다. 각 컴포넌트에 대해 별도의 CSS 모듈 파일을 만들고, 해당 모듈 파일 내에서 정의된 클래스 이름은 해당 컴포넌트에만 적용된다. 각 컴포넌트는 독립적인 스타일을 가지며, 클래스 이름 충돌을 방지하면서도 컴포넌트 스코프 내에서 스타일을 안전하게 유지할 수 있..

📌 react react는 라이브러리다. react 컴포넌트를 정의하고 관리하는 데 사용된다. react는 react 컴포넌트 클래스 및 함수, JSX 지원, 가상 DOM (Virtual DOM), 라이프사이클 메서드, 상태 관리 등의 기능들을 제공한다. import React from 'react'; class MyComponent extends React.Component { // 컴포넌트 로직 및 렌더링 메서드 } 📌 react-dom 웹 애플리케이션 또는 웹 앱을 개발할 때 사용되는 React의 확장 react-dom은 react로 만들어진 로직들과 기능들을 실제 브라우저에 렌더링해준다. (즉, react는 가상 DOM을 사용하여 메모리에 렌더링된 컴포넌트 트리를 관리하고, 이를 실제 DOM에 반..

📌 삼항연산자 사용하여 조건부 렌더링 조건 ? 참일 경우 실행할 내용 : 거짓일 경우 실행할 내용; { // 조건 itemList.length === 0 ? ( // 참일 경우 실행할 내용 목록이 없습니다. ) : ( // 거짓일 경우 실행할 내용 itemList.map((item) => ( )) ) } 📌 AND 연산자(&&) 사용하여 조건부 렌더링 두 조건 모두 참인 경우 참 조건을 만족할 때만 내용을 보여 주고, 만족하지 않을 때 아무것도 랜더링되지 않아야 하는 상황에서 사용한다. { itemList.length === 0 && ( 목록이 없습니다. ) } { itemList.length > 0 && itemList.map((item) => ( )) } 조건이 참(Truthy)일 때, 오른쪽의 표현..

📌 key를 추가하는 이유 key는 각 항목을 구별할 수 있도록 도와주는 유일한 식별자이다. 리액트가 배열 목록을 효율적으로 업데이트하고, 순서가 변경되어도 정확하게 변경된 요소만 업데이트하는 데 도움을 준다. (key를 기준으로 변경된 요소만 업데이트하고 나머지는 그대로 유지한다.) ➡️ key가 없으면 배열 아이템들을 식별하지 못 해서, 다 다시 그려준다. ➡️ key가 있으면 변경된 것만 새로운 것만 그려준다. ➡️ key가 없으면 배열의 순서를 기준으로 각 요소를 식별한다. ➡️ key가 없으면 리액트는 순서에 의존하여 모든 요소를 업데이트한다. 📌 테스트 const MyComponent = () => { const items = [ { id: 1, text: 'Item 1' }, { id: 2,..

제어된 컴포넌트 vs 제어되지 않은 컴포넌트 프레젠테이셔널 컴포넌트 vs 상태 유지 컴포넌트 dumb vs smart Stateless vs Statefull 📌 상태가 없는 컴포넌트 (Stateless) const StatelessComponent = (props) => { return {props.message}; }; 상태(state)를 갖지 않는 컴포넌트 props를 받아 렌더링하고 UI를 표시하는 역할 렌더링만 담당하므로 생명주기 메서드나 상태 변경에 따른 부가적인 작업을 수행하지 않는다. 리액트 훅을 사용하지 않는다. 단순하고 가벼워서 성능이 좋다. 📌 상태가 있는 컴포넌트 (Statefull) import React, { useState, useEffect } from 'react'; con..

리액트의 양방향 바인딩(Two-Way Binding)은 부모 컴포넌트의 상태가 자식 컴포넌트의 props로 전달되는 동시에 자식 컴포넌트에서 변경된 값이 부모 컴포넌트의 상태에도 즉시 반영되는 메커니즘을 의미한다. 주로 사용자 인터페이스 요소(입력 필드)의 값과 상태를 동기화할 때 유용하다. 📌 state를 이용한 양방향 바인딩 부모 컴포넌트가 inputValue라는 상태를 가지고 있고, 이 상태를 자식 컴포넌트에 value의 props으로 전달한다. 자식 컴포넌트에서는 입력 필드의 값이 변경될 때마다 handleChange 함수를 통해 onInputChange 콜백을 호출하여 부모의 상태를 갱신한다. import React, { useState } from 'react'; // 부모 컴포넌트 funct..

시작하기 전... HOOK React 버전 16.8부터 도입된 기능 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능 등을 사용할 수 있도록 하는 기능 훅은 use로 시작한다. 훅들은 리액트 컴포넌트 함수 안에서 호출되어야 한다. 🔥함수형 컴포넌트 기반으로 정리를 했습니다! useState 훅을 이용하면 컴포넌트에서 상태를 추가하고 관리할 수 있다. 컴포넌트 내에서 변수를 선언하면, 해당 변수의 값이 변경되어도 React는 컴포넌트를 다시 렌더링하지 않는다. React는 컴포넌트의 상태나 props가 변경되었을 때에만 다시 렌더링을 수행한다. 이것이 React의 "재평가" 개념이다. useState를 사용하여 상태를 선언하면, React가 해당 상태를 추적하고, 상태가 변경될 때마..