(컬렉션) React에서 흔히 볼 수 있는 면접 질문 소개

이 기사는 React에서 자주 묻는 질문을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다음은 React에 대해 일반적으로 사용되는 면접 질문 목록입니다.

면접관이든 채용 담당자이든 다음 질문을 참고할 수 있습니다.

북마크에 추가하세요

React의 작동 방식

React는 가상 DOM(가상 DOM)을 만듭니다. 구성 요소의 상태가 변경되면 React는 먼저 "diffing" 알고리즘을 통해 가상 DOM의 변경 사항을 표시하고 두 번째 단계는 조정이며 DOM은 diff 결과로 업데이트됩니다.

React를 사용하면 어떤 장점이 있나요?

렌더링 기능만 봐도 컴포넌트가 어떻게 렌더링되는지 쉽게 알 수 있습니다

JSX의 도입으로 컴포넌트의 코드를 더 읽기 쉽고 레이아웃을 더 쉽게 이해할 수 있습니다. 또는 구성 요소가 서로 참조하는 방식

서버 측 렌더링을 지원하여 SEO와 성능을 향상할 수 있습니다

테스트가 쉽습니다

React는 뷰 레이어에만 초점을 맞추기 때문에 다른 프레임워크(예: Backbone.js, Angular.js) 함께 사용

Presentational 컴포넌트와 Container 컴포넌트의 차이점은 무엇인가요?

Presentational 컴포넌트는 컴포넌트의 모양에 관심이 있습니다. 디스플레이는 구체적으로 props를 통해 데이터와 콜백을 허용하고 자체 상태를 거의 갖지 않지만 디스플레이 구성 요소에 자체 상태가 있는 경우 일반적으로 데이터 상태보다는 UI 상태에만 관심을 갖습니다.

컨테이너 구성 요소는 구성 요소가 작동하는 방식에 더 관심이 있습니다. 컨테이너 구성 요소는 프레젠테이션 구성 요소 또는 Flux actions를 호출하고 이를 프레젠테이션 구성 요소에 대한 콜백으로 제공하는 기타 컨테이너 구성 요소에 데이터와 동작을 제공합니다. 컨테이너 구성 요소는 다른 구성 요소의 데이터 소스이기 때문에 상태를 유지하는 경우가 많습니다.

클래스 구성 요소와 기능 구성 요소의 차이점은 무엇인가요?

클래스 구성 요소를 사용하면 구성 요소 자체의 상태 및 수명 주기 후크와 같은 추가 기능을 사용할 수 있을 뿐만 아니라 구성 요소가 스토어에 직접 액세스할 수 있습니다. 그리고 상태 유지

컴포넌트가 props만 받고 컴포넌트 자체를 페이지에 렌더링하는 경우 해당 컴포넌트는 '상태 비저장 컴포넌트'이며 순수 함수를 사용하여 이러한 컴포넌트를 만들 수 있습니다. 이런 종류의 컴포넌트를 덤(Dumb) 컴포넌트 또는 디스플레이 컴포넌트라고도 합니다. 상태와 소품의 차이점은 무엇입니까? 상태는 컴포넌트를 로드할 때 필요한 데이터에 대한 기본값입니다. 상태는 시간이 지남에 따라 변경될 수 있지만 대부분 사용자 이벤트 동작의 결과입니다.

Props(프로퍼티의 약어)는 컴포넌트의 구성입니다. Prop은 상위 구성 요소에서 하위 구성 요소로 전달되며 하위 구성 요소에 관한 한 Prop은 변경할 수 없습니다. 컴포넌트는 자신의 props를 변경할 수 없지만 하위 컴포넌트의 props를 하나로 묶을 수 있습니다(통합 관리). Prop은 단순한 데이터가 아닙니다. 콜백 함수도 Prop을 통해 전달될 수 있습니다.

(컴포넌트) 라이프 사이클 방법의 차이점을 지적하세요.

comComponentWillMount - 주로 루트 컴포넌트의 애플리케이션 구성에 사용됩니다.

comComponentDidMount - 여기에서 DOM 없이는 수행할 수 없는 모든 구성을 완료하고 모든 구성을 시작할 수 있습니다. 필수 데이터, 이벤트 수신을 설정해야 하는 경우 여기에서 완료할 수도 있습니다

comComponentWillReceiveProps - 이 주기적 함수는 특정 prop 변경으로 인한 상태 전환에 작용합니다

shouldComponentUpdate - 과도한 렌더링이 걱정되는 경우 구성 요소 shouldComponentUpdate는 성능을 향상시키는 방법입니다. 왜냐하면 구성 요소가 새 prop을 받으면 다시 렌더링되는 것을 방지할 수 있기 때문입니다. shouldComponentUpdate는 구성 요소를 다시 렌더링해야 하는지 여부를 결정하기 위해 부울 값을 반환해야 합니다.

comComponentWillUpdate - 거의 사용되지 않습니다. 구성 요소의 componentWillReceiveProps 및 shouldComponentUpdate를 대체하는 데 사용할 수 있습니다(그러나 이전 prop에는 액세스할 수 없음)

comComponentDidUpdate - 종종 DOM을 업데이트하고 prop 또는 상태 변경에 응답하는 데 사용됩니다

comComponentWillUnmount - 여기에서 네트워크 요청을 취소할 수 있습니다. 또는 모든 구성요소 관련 이벤트 리스너

를 제거하세요.

React 구성 요소에서 Ajax 요청이 시작되어야 하는 위치

React 구성 요소에서 네트워크 요청은 componentDidMount에서 시작되어야 합니다. 이 메서드는 구성 요소가 처음으로 "마운트"(DOM에 추가)될 때 실행되며 구성 요소의 수명 주기에서 한 번만 실행됩니다. 더 중요한 것은 구성요소가 마운트되기 전에는 보장할 수 없다는 것입니다. Ajax 요청이 완료되었다면 마운트 해제된 구성요소에서 setState를 호출하려고 시도 중이라는 뜻이며 이는 작동하지 않습니다. componentDidMount에서 네트워크 요청을 하면 업데이트할 구성 요소가 있는지 확인됩니다.

제어 구성 요소란 무엇입니까

HTML에서 , 및 <select>와 같은 양식 요소는 다음을 기반으로 자체 상태와 업데이트를 유지합니다. 사용자 입력. 사용자가 양식을 제출하면 이전에 언급된 요소의 값이 양식과 함께 전송됩니다. 하지만 React에서는 조금 다릅니다. form 요소를 포함하는 구성 요소는 상태의 입력 값을 추적하며 onChange와 같은 콜백 함수가 호출될 때마다 상태가 업데이트되고 구성 요소가 다시 렌더링됩니다. 이런 방식으로 React에 의해 값이 제어되는 입력 양식 요소를 "제어 요소"라고 합니다. </p> <h4 id="React에서-ref의-역할은-무엇인가요">React에서 ref의 역할은 무엇인가요</h4> <p>Refs는 DOM 노드 또는 React 구성 요소에 대한 참조를 얻는 데 사용할 수 있습니다. 참조를 사용하는 좋은 예는 포커스/텍스트 선택을 관리하거나, 명령 애니메이션을 트리거하거나, 타사 DOM 라이브러리와 통합하는 것입니다. 문자열 참조 및 인라인 참조 콜백을 사용하지 않아야 합니다. Refs 콜백은 React에서 권장됩니다. </p> <h4 id="고차-컴포넌트란-무엇인가요">고차 컴포넌트란 무엇인가요?</h4> <p>고차 컴포넌트는 컴포넌트를 매개변수로 사용하고 새 컴포넌트를 반환하는 함수입니다. HOC를 사용하면 코드, 논리 및 부트스트래핑 추상화를 재사용할 수 있습니다. 가장 일반적인 것은 아마도 Redux의 연결 기능일 것입니다. 단순히 도구 라이브러리와 간단한 구성을 공유하는 것 외에도 HOC를 위한 가장 좋은 방법은 React 구성 요소 간의 동작을 공유하는 것입니다. 동일한 작업을 수행하기 위해 여러 위치에 많은 코드를 작성했다면 해당 코드를 재사용 가능한 HOC로 리팩토링하는 것을 고려해야 합니다. </p> <p>Exercise</p> <p>입력을 반전시키는 HOC 작성</p> <p>API에서 수신 구성 요소로 데이터를 제공하는 HOC 작성</p> # 🎜🎜#조정을 피하기 위해 shouldComponentUpdate를 구현하는 HOC 작성<p></p>React.Children.toArray를 통해 들어오는 구성 요소의 하위 구성 요소를 정렬하는 HOC 작성<p></p>화살표 사용이란 무엇입니까? 함수의 장점(화살표 함수)<h4></h4> <div>범위 안전성: 화살표 함수 이전에 새로 생성된 각 함수는 엄격 모드에서 고유한 this 값(생성자의 새 값) 개체를 갖습니다. 함수 호출에서는 정의되지 않습니다. 함수가 "객체 메서드", 기본 객체 등으로 호출되는 경우), 둘러싸는 실행 컨텍스트의 this 값을 사용하는 화살표 함수는 그렇지 않습니다. <p></p>Simple: 화살표 함수는 읽고 쓰기 쉽습니다<p></p>Clear: 모든 것이 화살표 함수인 경우 모든 일반 함수를 즉시 사용하여 범위를 정의할 수 있습니다. 개발자는 항상 다음 상위 함수 명령문을 찾아 this<p></p>의 값을 확인할 수 있습니다.<h4 id="setState에-전달된-매개변수가-객체-대신-콜백인-것이-권장되는-이유">setState에 전달된 매개변수가 객체 대신 콜백인 것이 권장되는 이유</h4> <p>this.props와 this.state의 업데이트는 비동기적일 수 있고 해당 값을 사용하여 다음 상태를 계산할 수 없기 때문입니다. </p> <h4 id="생성자에서-code-this-code-를-바인딩하는-것-외에-다른-방법이-있나요-code-this-code-还有其它方式吗">생성자에서 <code>this</code>를 바인딩하는 것 외에 다른 방법이 있나요? <code>this</code>，还有其它方式吗</h4> <p>你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。</p> <h4 id="怎么阻止组件的渲染">怎么阻止组件的渲染</h4> <p>在组件的 render 方法中返回 null 并不会影响触发组件的生命周期方法</p> <h4 id="当渲染一个列表时-何为-key-设置-key-的目的是什么">当渲染一个列表时，何为 key？设置 key 的目的是什么</h4> <p>Keys 会有助于 React 识别哪些 items 改变了，被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识，选择一个 key 的最佳方法是使用一个字符串，该字符串能惟一地标识一个列表项。很多时候你会使用数据中的 IDs 作为 keys，当你没有稳定的 IDs 用于被渲染的 items 时，可以使用项目索引作为渲染项的 key，但这种方式并不推荐，如果 items 可以重新排序，就会导致 re-render 变慢。</p> <h4 id="在构造函数中-调用-super-props-的目的是什么">(在构造函数中)调用 super(props) 的目的是什么</h4> <p>在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。</p> <h4 id="何为-JSX">何为 JSX</h4> <p>JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。</p> <h4 id="怎么用-React-createElement-重写下面的代码">怎么用 React.createElement 重写下面的代码</h4> <p>Question：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const element = (   <h1 className="greeting">     Hello, rdhub.cn!   </h1> );</pre><div class="contentsignin">로그인 후 복사</div></div> <p>Answer：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const element = React.createElement(   'h1',   {className: 'greeting'},   'Hello, rdhub.cn!' );</pre><div class="contentsignin">로그인 후 복사</div></div> <h4>何为 <code>Children</code> </h4>create-react-app과 마찬가지로 속성 초기화를 사용하여 콜백을 올바르게 바인딩할 수 있습니다. 기본적으로 지원됩니다. 콜백에서는 화살표 함수를 사용할 수 있지만 문제는 구성 요소가 렌더링될 때마다 새 콜백이 생성된다는 것입니다. <p></p>컴포넌트 렌더링을 방지하는 방법<p></p>컴포넌트의 렌더링 메서드에서 null을 반환해도 해당 컴포넌트를 트리거하는 수명 주기 메서드에 영향을 주지 않습니다.<h4></h4>목록을 렌더링할 때 핵심은 무엇인가요? 키 설정의 목적은 무엇입니까 <p></p>키는 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 도움이 됩니다. 열쇠 (DOM) 요소에 안정적인 ID를 제공하려면 배열 내의 요소를 할당해야 합니다. 키를 선택하세요. 가장 좋은 방법은 목록 항목을 고유하게 식별하는 문자열을 사용하는 것입니다. 안정적인 ID가 없을 때 데이터의 ID를 키로 사용하는 경우가 많습니다. 렌더링된 항목과 함께 사용할 경우 항목 인덱스를 항목을 렌더링하는 키로 사용할 수 있지만 항목을 다시 정렬할 수 있으면 다시 렌더링 속도가 느려지므로 권장되지 않습니다. <h4></h4>(생성자에서) super(props)를 호출하는 목적은 무엇인가요?<p></p>super()가 호출되기 전에는 하위 클래스가 이를 사용할 수 없습니다. ES2015에서는 하위 클래스가 생성자에서 super()를 호출해야 합니다. props를 super()에 전달하는 이유는 (서브클래스에서) 생성자의 this.props에 더 쉽게 액세스할 수 있도록 하기 위한 것입니다. <h4></h4>JSX란 무엇입니까<p></p>JSX는 JavaScript 구문의 구문 확장이며 JavaScript의 모든 기능을 가지고 있습니다. JSX 생산 반응 "요소"를 사용하면 JavaScript 표현식을 중괄호로 묶어 JSX에 포함할 수 있습니다. 컴파일이 완료되면 JSX 표현식은 일반 표현식이 됩니다. JavaScript 객체는 if 문과 for 루프 내에서 JSX를 사용하고, 이를 변수에 할당하고, 인수로 받아들이고, 함수에서 반환할 수 있음을 의미합니다. <h4></h4>React.createElement를 사용하여 다음 코드를 다시 작성하는 방법<p></p>질문: <p>rrreee</p>답변: <p>rrreee</p> <code>Children</code>이 무엇인가요?<p></p>JSX 표현식에서 시작 태그(예: <a>) ;)와 닫는 태그(예: </a>) 사이의 내용은 특수 속성 props.children으로 포함 구성 요소에 자동으로 전달됩니다. <p></p>이 속성에는 React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray를 포함하여 다양한 메서드를 사용할 수 있습니다. <h4></h4>React의 상태란 무엇입니까<p></p>State는 props와 유사하지만 비공개이며 구성 요소 자체에 의해 완전히 제어됩니다. 상태는 기본적으로 데이터를 보유하고 구성 요소가 렌더링되는 방식을 결정하는 개체입니다. <h4></h4>create-react-app<p></p>webpack 또는 babel 사전 설정을 구성하려는 경우 종속성을 벗어나도록 유도하는 이유는 무엇입니까? <h4></h4>redux란 무엇입니까<p></p>Redux의 기본 아이디어는 전체 애플리케이션 상태를 단일 저장소에 유지하는 것입니다. 저장소는 간단한 자바스크립트입니다 그리고 애플리케이션 상태를 변경하는 유일한 방법은 애플리케이션에서 작업을 트리거한 다음 이러한 작업이 수정되도록 리듀서를 작성하는 것입니다. 상태. 전체 상태 변환은 리듀서에서 수행되며 부작용이 없어야 합니다. <h4></h4>Redux에서 store란 무엇인가요<p></p>Store는 전체 애플리케이션의 상태를 저장하는 자바스크립트 객체입니다. 동시에 Store는 다음 책임도 맡습니다. <p class="comments-box-content"></p> getState()를 통해 상태에 대한 액세스 허용 🎜🎜 디스패치(action)를 통해 상태 변경 실행 🎜🎜 subscribe(listener)를 통해 리스너 등록 🎜🎜 반환된 함수를 통해 리스너 처리 by subscribe(listener) 로그아웃 🎜🎜액션이란 무엇입니까🎜🎜액션은 순수 자바스크립트 객체이며 실행 중인 액션 유형을 나타내는 유형 속성이 있어야 합니다. 기본적으로 작업은 애플리케이션에서 저장소로 데이터를 보내는 페이로드입니다. 🎜🎜리듀서란 무엇인가요🎜🎜리듀서는 이전 상태와 액션을 매개변수로 받아 다음 상태를 반환하는 순수 함수입니다. 🎜🎜Redux Thunk의 기능은 무엇인가요? 🎜🎜Redux 썽크는 액션 대신 함수를 반환하는 액션 생성자를 작성할 수 있는 미들웨어입니다. 특정 조건이 충족되면 썽크를 사용하여 작업 디스패치(dispatch)를 지연할 수 있으며, 이는 비동기 작업 디스패치(dispatch)를 처리할 수 있습니다. 🎜🎜순수 함수란 무엇인가요?🎜🎜순수 함수는 해당 범위 밖의 변수에 의존하지 않고 상태를 변경하지 않는 함수입니다. 이는 또한 순수 함수가 동일한 매개변수에 대해 항상 동일한 값을 반환한다는 의미이기도 합니다. 결과. 🎜🎜🎜</div> </div><p>위 내용은 (컬렉션) React에서 흔히 볼 수 있는 면접 질문 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796784440.html" title="<s> : 데드 레일 - 모든 도전을 완료하는 방법" class="phpgenera_Details_mainR4_bottom_title"><s> : 데드 레일 - 모든 도전을 완료하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796784000.html" title="Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁" class="phpgenera_Details_mainR4_bottom_title">Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/article.html">더보기</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>핫 AI 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>무료로 이미지를 벗다</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI 옷 제거제</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796784440.html" title="<s> : 데드 레일 - 모든 도전을 완료하는 방법" class="phpgenera_Details_mainR4_bottom_title"><s> : 데드 레일 - 모든 도전을 완료하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796784000.html" title="Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁" class="phpgenera_Details_mainR4_bottom_title">Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/article.html">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>뜨거운 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title"> <h3>메모장++7.3.1</h3> </a> <p>사용하기 쉬운 무료 코드 편집기</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 중국어 버전</h3> </a> <p>중국어 버전, 사용하기 매우 쉽습니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title"> <h3>스튜디오 13.0.1 보내기</h3> </a> <p>강력한 PHP 통합 개발 환경</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title"> <h3>드림위버 CS6</h3> </a> <p>시각적 웹 개발 도구</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac 버전</h3> </a> <p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>뜨거운 주제</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7677</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1393</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/c-tutorial" title="C# 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">C# 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1207</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>91</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>73</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/faq/zt">더보기</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/499503.html" title="React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63aacf4b62050134.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/499503.html" title="React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법" class="phphistorical_Version2_mids_title">React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법</a> <span class="Articlelist_txts_time">Dec 27, 2022 pm 07:01 PM</span> <p class="Articlelist_txts_p">호출 방법: 1. 클래스 구성 요소의 호출은 React.createRef(), ref의 기능적 선언 또는 사용자 정의 onRef 속성을 사용하여 구현할 수 있습니다. 2. 함수 구성 요소 및 Hook 구성 요소의 호출은 useImperativeHandle 또는 forwardRef를 사용하여 구현할 수 있습니다. 하위 구성 요소 참조가 구현되었습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/522909.html" title="React의 커스텀 Hook에 대한 심층적인 이해" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/644111dd49e1c260.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React의 커스텀 Hook에 대한 심층적인 이해" /> </a> <a href="https://www.php.cn/ko/faq/522909.html" title="React의 커스텀 Hook에 대한 심층적인 이해" class="phphistorical_Version2_mids_title">React의 커스텀 Hook에 대한 심층적인 이해</a> <span class="Articlelist_txts_time">Apr 20, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">React 커스텀 Hooks는 재사용 가능한 함수에 컴포넌트 로직을 캡슐화하는 방법으로, 클래스를 작성하지 않고도 상태 로직을 재사용할 수 있는 방법을 제공합니다. 이 기사에서는 캡슐화 후크를 사용자 정의하는 방법을 자세히 소개합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/505907.html" title="React 소스 코드를 디버깅하는 방법은 무엇입니까? 여러 도구를 사용한 디버깅 방법 소개" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202303/31/2023033118531636061.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React 소스 코드를 디버깅하는 방법은 무엇입니까? 여러 도구를 사용한 디버깅 방법 소개" /> </a> <a href="https://www.php.cn/ko/faq/505907.html" title="React 소스 코드를 디버깅하는 방법은 무엇입니까? 여러 도구를 사용한 디버깅 방법 소개" class="phphistorical_Version2_mids_title">React 소스 코드를 디버깅하는 방법은 무엇입니까? 여러 도구를 사용한 디버깅 방법 소개</a> <span class="Articlelist_txts_time">Mar 31, 2023 pm 06:54 PM</span> <p class="Articlelist_txts_p">React 소스 코드를 디버깅하는 방법은 무엇입니까? 다음 글에서는 다양한 도구에서 React 소스코드를 디버깅하는 방법에 대해 이야기하고, Contributors, create-react-app, vite 프로젝트에서 실제 React 소스코드를 디버깅하는 방법을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/500727.html" title="React가 앱 구축을 위한 첫 번째 선택으로 Vite를 사용하지 않는 이유" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63dce459ae0cc658.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React가 앱 구축을 위한 첫 번째 선택으로 Vite를 사용하지 않는 이유" /> </a> <a href="https://www.php.cn/ko/faq/500727.html" title="React가 앱 구축을 위한 첫 번째 선택으로 Vite를 사용하지 않는 이유" class="phphistorical_Version2_mids_title">React가 앱 구축을 위한 첫 번째 선택으로 Vite를 사용하지 않는 이유</a> <span class="Articlelist_txts_time">Feb 03, 2023 pm 06:41 PM</span> <p class="Articlelist_txts_p">React가 애플리케이션 구축을 위한 첫 번째 선택으로 Vite를 사용하지 않는 이유는 무엇입니까? 다음 기사에서는 React가 Vite를 기본 권장 사항으로 권장하지 않는 이유에 대해 설명합니다. 이것이 도움이 되기를 바랍니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/499833.html" title="반응에서 div 높이를 설정하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202301/06/2023010610162061324.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="반응에서 div 높이를 설정하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/499833.html" title="반응에서 div 높이를 설정하는 방법" class="phphistorical_Version2_mids_title">반응에서 div 높이를 설정하는 방법</a> <span class="Articlelist_txts_time">Jan 06, 2023 am 10:19 AM</span> <p class="Articlelist_txts_p">반응에서 div 높이를 설정하는 방법: 1. CSS를 통해 div 높이를 구현합니다. 2. 상태에서 객체 C를 선언하고 객체에 변경 버튼의 스타일을 저장한 다음 A를 가져오고 C에서 "marginTop"을 재설정합니다. .그것은 캔이다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/497381.html" title="7가지 훌륭하고 실용적인 React 구성 요소 라이브러리(압박 속에서 공유됨)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6364fe2a176ea129.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="7가지 훌륭하고 실용적인 React 구성 요소 라이브러리(압박 속에서 공유됨)" /> </a> <a href="https://www.php.cn/ko/faq/497381.html" title="7가지 훌륭하고 실용적인 React 구성 요소 라이브러리(압박 속에서 공유됨)" class="phphistorical_Version2_mids_title">7가지 훌륭하고 실용적인 React 구성 요소 라이브러리(압박 속에서 공유됨)</a> <span class="Articlelist_txts_time">Nov 04, 2022 pm 08:00 PM</span> <p class="Articlelist_txts_p">이 글에서는 일상적인 개발에 자주 사용되는 훌륭하고 실용적인 7가지 React 구성 요소 라이브러리를 공유하겠습니다. 와서 모아서 사용해 보세요!</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/499703.html" title="깔끔한 React 코드 작성을 위한 10가지 실용적인 팁" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63b41d0410955723.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="깔끔한 React 코드 작성을 위한 10가지 실용적인 팁" /> </a> <a href="https://www.php.cn/ko/faq/499703.html" title="깔끔한 React 코드 작성을 위한 10가지 실용적인 팁" class="phphistorical_Version2_mids_title">깔끔한 React 코드 작성을 위한 10가지 실용적인 팁</a> <span class="Articlelist_txts_time">Jan 03, 2023 pm 08:18 PM</span> <p class="Articlelist_txts_p">이 글은 더 간단한 React 코드를 작성하는 데 도움이 되는 10가지 실용적인 팁을 공유할 것입니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/498796.html" title="Vuex와 Pinia의 디자인과 구현의 차이점에 대해 이야기해 보겠습니다." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/639069734180d774.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Vuex와 Pinia의 디자인과 구현의 차이점에 대해 이야기해 보겠습니다." /> </a> <a href="https://www.php.cn/ko/faq/498796.html" title="Vuex와 Pinia의 디자인과 구현의 차이점에 대해 이야기해 보겠습니다." class="phphistorical_Version2_mids_title">Vuex와 Pinia의 디자인과 구현의 차이점에 대해 이야기해 보겠습니다.</a> <span class="Articlelist_txts_time">Dec 07, 2022 pm 06:24 PM</span> <p class="Articlelist_txts_p">프런트엔드 프로젝트를 개발할 때 상태 관리는 항상 피할 수 없는 주제입니다. Vue 및 React 프레임워크 자체는 이 문제를 해결하기 위한 몇 가지 기능을 제공합니다. 그러나 대규모 애플리케이션을 개발할 때는 보다 표준화되고 완전한 작업 로그에 대한 필요성, 개발자 도구에 통합된 시간 여행 기능, 서버 측 렌더링 등과 같은 다른 고려 사항이 있는 경우가 많습니다. 이 기사에서는 Vue 프레임워크를 예로 들어 두 가지 상태 관리 도구인 Vuex와 Pinia의 설계 및 구현 차이점을 소개합니다.</p> </div> </div> <a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745446000"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>