test : re-rendering conditions

README.md

@@ -635,3 +635,15 @@ PayloadTooLargeError: request entity too large
 - npm install --save @tinymce/tinymce-react
 
 </details>
+
+<details>
+<summary>rerendering, component separation</summary>
+
+# 테스트 환경
+
+- next.js
+- dir : with-redux-app
+
+## re-rendering
+
+</details>

with-redux-app/components/Rerendering.js

@@ -0,0 +1,73 @@
+import React, { useRef, useState } from 'react';
+import TestAnother from './TestAnother';
+import TestSubComponent from './TestSubComponent';
+import styled from 'styled-components';
+
+const SubTitle = styled.h2`
+  font-size: 36px;
+`;
+
+const RerenderingTest = () => {
+  //   const SubTitle = styled.h2`
+  //     //
+  //   `;
+  const [pop, setPop] = useState(true);
+  const [count, setCount] = useState(0);
+  const [aProp, setAProp] = useState('initial value');
+  const [someText, setSomeTest] = useState('some text');
+  //   const [aBoolean, setABoolean] = useState(true);
+  const inputText = useRef();
+  function onClickTogglePopButton() {
+    setPop(prev => !prev);
+  }
+  function onClickTestChangeState() {
+    setCount(prev => (prev += 1));
+  }
+  function handleSubmitForm(event) {
+    event.preventDefault();
+    setAProp(inputText.current.value);
+    inputText.current.value = '';
+  }
+
+  return (
+    <div>
+      <div>이것도 렌더링 되나?</div>
+      <header>
+        Hello world!
+        <h1>This is a title</h1>
+        <SubTitle>This is a subtitle</SubTitle>
+        {/* <h2 style={{ fontSize: '36px' }}>This is a subtitle</h2> */}
+        <div>{someText}</div>
+      </header>
+      <main>
+        It's a main
+        <div>
+          <button onClick={onClickTogglePopButton}>toggle button</button>
+          {pop && <span>kinda popup</span>}
+        </div>
+        <TestAnother />
+        <div>
+          <button onClick={onClickTestChangeState}>change state</button>
+          <span>{count}</span>
+        </div>
+        <label>TestSubComponent의 aProp 값 변경</label>
+        <form onSubmit={handleSubmitForm}>
+          <input ref={inputText} type="text" />
+        </form>
+        <TestSubComponent
+          aProp={aProp}
+          setSomeTest={setSomeTest}
+          someText={someText}
+        />
+      </main>
+
+      <footer>
+        <p>It's a footer</p>
+        {/* <div>{someText}</div> */}
+        <div>static text</div>
+      </footer>
+    </div>
+  );
+};
+
+export default RerenderingTest;

with-redux-app/components/TestAnother.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestAnother = () => {
+  return <div>TestAnother</div>;
+};
+
+export default TestAnother;

with-redux-app/components/TestSubComponent.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react';
+
+const TestSubComponent = ({ aProp, setSomeTest, someText }) => {
+  const inputText = useRef();
+  function handleSubmitForm(event) {
+    event.preventDefault();
+    setSomeTest(inputText.current.value);
+    inputText.current.value = '';
+  }
+  useEffect(() => {
+    console.log('someText', someText);
+  }, [someText]);
+  return (
+    <div>
+      <form onSubmit={handleSubmitForm}>
+        <label>TestSubComponent</label>
+        <input ref={inputText} type="text" />
+      </form>
+      {aProp}
+    </div>
+  );
+};
+
+export default TestSubComponent;