728x90 반응형 IT/React43 리액트 컴포넌트가 렌더링되는 것과 useEffect가 실행되는것의 차이 컴포넌트가 렌더링되는 것과 가 실행되는 것은 서로 다른 개념입니다. 두 개념은 독립적이지만, 종종 함께 발생하기 때문에 혼동될 수 있습니다. 하나씩 분리해서 살펴볼게요. 컴포넌트 렌더링: 컴포넌트가 렌더링된다는 것은 React가 해당 컴포넌트의 UI를 다시 계산하고 그 결과를 DOM에 반영하는 과정을 의미합니다. 렌더링은 다음의 상황에서 발생합니다: 1. 초기 렌더링: 컴포넌트가 처음 화면에 나타날 때.2. 상태(state) 또는 속성(props) 변경: 컴포넌트의 상태나 부모로부터 전달된 속성이 변경되었을 때.3. 부모 컴포넌트의 리렌더링: 부모가 리렌더링되면 자식도 리렌더링될 수 있습니다.useEffect 의 실행: useEffect 는 컴포넌트의 렌더링 결과와 관계없이, 특정 의존성 배열에 따라 추.. 2025. 3. 28. 리액트에서 props 로 받은 변수는 복사본인가? 아니면 참조인가? React에서 로 전달받은 변수는 원본 데이터의 복사본이 아닙니다. prop는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터의 **참조(reference)**입니다. 따라서 자식 컴포넌트에서 를 직접 수정하려고 하면 React의 상태 관리 방식과 일관성에 문제가 생길 수 있습니다. 위 코드에서 몇 가지 중요한 점을 짚어볼게요: 1. props로 받은 변수의 변경 원본 데이터를 참조하고 있으므로, 직접 수정하면 부모 컴포넌트의 상태에 영향을 미칠 수 있습니다.이는 React에서 권장되지 않는 방식입니다. React의 props는 읽기 전용으로 간주해야 하며, 직접 변경하지 않는 것이 좋습니다. 대신 상태를 업데이트하거나 새로운 객체를 생성하여 변경 사항을 반영해야 합니다. 2. props로 전달받은 .. 2025. 3. 26. 리액트 HTML에 이벤트 핸들러를 화살표 함수 형태로 작성해야 하는 이유.(이벤트 핸들러 동작시점) onOptionClick(questions[questionNum]?.answer[0]?.type)}> ============================================================================================ 이 코드에서는 메서드를 직접 이벤트 핸들러로 전달합니다. 이 형태에서는 이벤트가 발생하면, 함수가 호출됩니다. 그런데 중요한 점은, 이렇게 할 경우 함수는 파라미터를 전달받지 않습니다. 기본적으로 은 함수만 실행하고, 추가적인 인수 전달은 없습니다. onOptionClick(questions[questionNum]?.answer[0]?.type)}>이 코드에서는 화살표 함수로 이벤트 핸들러를 래핑하고 있습니다. 이 화살표 .. 2025. 3. 26. React 상태관리 라이브러리 zustand 요즘은 이게 뜨는것 같음. https://www.heropy.dev/p/n74Tgc Zustand 핵심 정리Zustand(주스탠드)는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.www.heropy.dev 2025. 3. 26. 이전 1 2 3 4 ··· 11 다음 728x90 반응형