[React] props, state

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

React state & Props

state, props의 개념

1. State
   1. 살면서 변할 수 있는 값
   2. 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
2. Props
   1. 외부로부터 전달 받은 값
3. State vs Props
   1. Tweeter에 있는 속성값들은 State일까? Props일까?
      1. 하나의 컴포넌트에 귀속된 값이 아니기 때문에 Props에 해당.

   2. [이름/성별/나이/현재사는 곳/취업여부/결혼-연애 여부] - 어떤 것이 Props or State에 적합한지?

      Props	State
      이름	나이
      성별	현재 사는 곳
      	취업여부
      	결혼-연애 여부

   3. Toggle Switch
      1. On / Off 여부로 값이 변경됨
      2. State에 해당

   4. Couter

      

      1. State 해당

Props

1. Props의 특징
   1. 컴포넌트의 속성(property)을 의미
      1. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값
      2. 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당
   2. 🍒부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값✨✨✨✨✨✨✨
      1. 무조건 내 상위의 컴포넌트만 가능함 조상은 안됨.
      2. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있음

   3. 객체 형태입니다.

      props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가짐

   4. props는 읽기 전용
      1. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값
      2. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체→ 함부로 변경되지 않아야 하기 때문
2. Props 사용 방법
   1. props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있음
      1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의
      2. props를 이용하여 정의된 값과 속성을 전달
      3. 전달받은 props를 렌더링한다.

   2. 예제-1

      

      App이 최상위 컴포넌트

      

      • Props는 데이터를 위에서 밖에 못 받기 때문에 Tweets와 Mypage 둘 다 같은 데이터 필요한 경우에는 서로 공유를 못하므로 데이터는 app에서 가지고 있어야 함.
      • 아래에서 위로는 절대 정보 못보냄
      • 만약 footer에서 app이 가지고 있는 데이터 필요한 경우에는 app에서 tweet에서 내리고 tweet에서 footer로 한번 더 내려야 함.
      • 그럼 모든 props를 최상위에 두면 되지 않을까?? ⇒ 상태를 모두 전역변수로 사용하겠다는 것임. 상태를 하나의 컴포넌트가 가지고 있는 것은 불가능에 가까움, 전역으로 관리할 경우 유지보수가 어렵다.
      • 요즘 앱은 Props 엄청 많고 컴포넌트도 많아서 관리하기 어려움, 서드파티에서 관리, 지원해주는 상태관리 툴이 있음 but, 데이터 많지 않은데 툴 사용시 복잡도가 올라감

   3. 예제-2

       function Parent() {
         return (
           <div className="parent">
             <h1>I'm the parent</h1>
             <Child />
           </div>);
       };
              
       function Child() {
         return (
           <div className="child"></div>);
       };
      

      1. props를 사용하기 위해 우선 <Parent> 와 <Child> 라는 컴포넌트를 선언하고, <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성

      2. 컴포넌트 작성 후 전달하고자 하는 속성을 정의

          <a href="www.javascript.com">Click me to visit javascript</a>
         

      3. React에서 JSX 속성 및 값을 할당하는 방법-1

          <Child attribute={value} />
         

         자바스크립트에서 사용하는 변수를 넣을 것이라서 중괄호 사용

      4. React에서 JSX 속성 및 값을 할당하는 방법 2

          <Child text={"I'm the eldest child"} />
         

      5. parent 컴포넌트에서 전달된 데이터를 받는 방법 = <Child> 컴포넌트에서 props 매개변수 사용 예시

          function Child(props) {
            return (
              <div className="child"></div>
            );
          };
         

         ---

         props는 고정이고 바꿀 수 없다. props 타입은 객체인데 실제 들어온 값은 text인데 props에서 어떻게 값을 가져올 수 있을까?

         실제로 props를 출력해보면 props ={”text” : “I’m the eldest child” }

         즉 props.text로 접근 하는 것임.

         ---

      6. 전달받은 props 렌더링 하기
         • props는 객체라서 key value 형태를 띰
         • 여기서는 parent 컴포넌트에서 정의한 { attribute : value }의 형태를 띠게 됨
         • props의 value 또한 dot notation으로 접근할 수 있음.

          function Child(props) {
            return (
              <div className="child">
                <p>{props.text}</p>
              </div>
            );
          };
         

      • 실습-1

          import "./styles.css";
                    
          function Parent() {
            return (
              <div className="parent">
                <h1>I'm the parent</h1>
                <Child text={"I'm the eldest child"} />
                {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
                <Child />
              </div>
            );
          }
                    
          function Child(props) {
            // console 을 열어 props 의 형태를 직접 확인하세요.
            console.log("props : ", props);
            return (
              <div className="child">
                <p>{props.text}</p>
              </div>
            );
          }
                    
          export default Parent;
        

        실습-2

          import "./styles.css";
                    
          const App = () => {
            const itemOne = "React를";
            const itemTwo = "배우고 있습니다.";
                    
            return (
              <div className="App">
                {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
                props 로 전달하세요 */}
                <Learn items={[itemOne,itemTwo]}/>;
                        
              </div>
            );
          };
                    
          const Learn = (props) => {
            // 전달받은 props 를 아래 <div> tag 사이에 사용하여
            // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
            return <div className="Learn">{props.items[0]+" "+props.items[1]}</div>;
          };
                    
          export default App;
        

        

State

컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 함.

네모 박스에 있는 값들은 변할 수 있는 값.

State hook, useState

React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초깃값

---

사용방법과 작동방식은 아래와 같음.

1. React로부터 useState 를 불러오기 - import 키워드

    import { useState } from "react";
   

2. 이후 usestate를 컴포넌트 안에서 호출
   1. 호출이란 변수를 선언하는 것과 같음, 변수 이름은 상관 없음
   2. 일반적인 변수는 사라지지만 state 변수는 React에 의해 함수가 끝나도 사라지지 않음

    function CheckboxExample() {
    // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
      const [isChecked, setIsChecked] = useState(false);
    }
   

   • isChecked, setIsChecked 는 useState 의 리턴 값을 구조 분해 할당한 변수 → 이 틀은 외워야 함.

     • 상기 코드를 풀어쓰면 아래 코드와 같음

         function CheckboxExample() {
           const stateHookArray = useState(false); // 2번
           const isChecked = stateHookArray[0];
           const setIsChecked = stateHookArray[1];
         }
       

   • usestate는 선언과 할당을 동시에 하는 것임. 초기 값이 false 임

   • 여기서 isChecked는 변수 setIsChecked는 함수.

       const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
     

   • const가 들어 와서 재할당이 안 되는데 setIsCheked 가 변경되면서 새로고침 된다고 생각하면 됨
     • let을 붙이면 낫지 않을까 ??생각했는데 새로고침이 되는 것이 대부분이라서 화면 어딘가가 바껴야 하기 때문
       → 화면이 바뀌기 전까지는 불변임
     • 이해안가도 외워야 함! ➡️ react사이트에 공식문서에 적혀있기 때문, const는 고정이다
       = 다시화면이 만들어진다는 것을 강조
   • state가 변경되는 순관 새로고침 된 채로 다시 시작. dom을 다시 점검함.
   • state 값에 들어올 수 있는 타입은 제한 없음.
   • 초기 값에 배열을 넣고 싶으면 false 자리에 빈 배열 넣으면 됨.
   • 함수 들어올 수 있지만 넣는 경우 없다

3. 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용,
   여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용

    <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
   

4. State 갱신하기

    import React, { useState } from "react";
    import "./styles.css";
       
    function CheckboxExample() {
      const [isChecked, setIsChecked] = useState(false);
       
      const handleChecked = (event) => {
        setIsChecked(event.target.checked);
      };
      return (
        <div className="App">
          <input type="checkbox" checked={isChecked} onChange={handleChecked} />
          <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
        </div>
      );
    }
       
    export default CheckboxExample;
   

   1. state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출
   2. 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked 가 변경되어야 함.
      브라우저에서 checked로 값이 변경되었다면, React의 isChecked 도 변경되어야 함.
   3. input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생
   4. 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 됨
   5. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 함

   6. 강제로 변경을 시도 안됨

      

      • React state는 상태 변경 함수 호출로 변경해야 함. ⇒ 강제로 변경을 시도하면 안 됨.
      • 상태 변경 함수 사용은 React와 개발자의 약속임.
      • 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않음.
      • 예시 : state.push(1);, state[1] = 2;, state = 'wrong state';

5. 예제-1

   

   • 해당 부분만 변경되는 것. 반환되는 결과는 렌더링되는 화면, 일부만 렌더링 즉 , 컴포넌트이다. = check박스에 대한.
   • onChange={handleChecked} />에 변화가 있으면 handleChecked가 실행되는 것.
   • state 바뀌면 컴포넌트가 재랜더링 됨.

   • 아래 코드 랜더링이 안됨, 꼭 피해야 되는 경우

     

   • 하나의 컴포넌트는 여러개의 상태를 가질 수 있음 . 네개의 체크박스를 만들면 네개의 컴포넌트

     

이벤트처리

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사

• React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달

• HTML의 이벤트 처리방식

    <button onclick="handleEvent()">Event</button>
  

• React 의 이벤트 처리방식

    <button onClick={handleEvent}>Event</button>
  

example

1. onChange
   1. <input> <textarea> <select> 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용
   2. React 에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트 함
   3. onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있음

   4. 예제-1

       function NameForm() {
         const [name, setName] = useState("");
              
         const handleChange = (e) => {
           setName(e.target.value);
         }
              
         return (
           <div>
             <input type="text" value={name} onChange={handleChange}></input>
             <h1>{name}</h1>
           </div>)
       };
      

      • 컴포넌트 return 문 안의 input 태그에 value 와 onChange 를 넣음
      • onChange 는 input 의 텍스트가 바뀔 때마다 발생하는 이벤트
      • 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state 로 갱신

   5. 예제 -2

       import React, { useState } from "react";
       import "./styles.css";
              
       function SelectExample() {
         const [choice, setChoice] = useState("apple");
              
         const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
         const options = fruits.map((fruit) => {
           return <option value={fruit}>{fruit}</option>;
         });
         console.log(choice);
         const handleFruit = (event) => {
           //TODO : select tag 가 정상적으로 작동하도록 코드를 완성하세요.
       	    	**setChoice(event.target.value);**
         };
              
         return (
           <div className="App">
             <select onChange={handleFruit}>{options}</select>
             <h3>You choose "{choice}"</h3>
           </div>
         );
       }
              
       export default SelectExample;
              
      

      

2. onClick : 클릭했을 때 발생하는 이벤트
   1. 클릭했을 때 발생하는 이벤트
   2. 버튼이나 <a> tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트

    function NameForm() {
      const [name, setName] = useState("");
       
      const handleChange = (e) => {
        setName(e.target.value);
      }
       
      return (
        <div>
          <input type="text" value={name} **onChange**={handleChange}></input>
          <button **onClick**={alert(name)}>Button</button>
          <h1>{name}</h1>
        </div>);
    };
   

   1. onChange 예시에 버튼을 추가하여 버튼 클릭 시 input tag 에 입력한 이름이 alert을 통해 알림 창이 팝업 되도록 코드를 추가함
   2. onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용
   3. 그렇기 때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 alert 이 실행되고 따라서 그 결과인 undefined (함수는 리턴 값이 없을 때 undefined 를 반환) 가 onClick 에 적용되어 클릭했을 때 아무런 결과도 일어나지 않음
   4. 따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 함.

   5. 예시 : ****

       // 함수 정의하기
              
       return (
         <div>
       	...
           <button onClick={() => alert(name)}>Button</button>
       	...
         </div>);
       };
              
       // 함수 자체를 전달하기
              
       const handleClick = () => {
         alert(name);
       };
              
       return (
         <div>
             ...
           <button onClick={handleClick}>Button</button>
             ...
         </div>);
       };
      

      → 맞게 쓴 예제

       import "./styles.css";
       import React, { useState } from "react";
              
       function NameForm() {
         const [name, setName] = useState("");
              
         const handleChange = (e) => {
           setName(e.target.value);
         };
              
         const handleClick = () => {
           alert(name);
         };
         return (
           <div className="App">
             <h1>Event handler practice</h1>
             <input type="text" value={name} onChange={handleChange}></input>
             **<button onClick={handleClick}>Button</button>**
             {/* <button onClick={() => alert(name)}>Button</button> */}
             **<h3>{name}</h3>**
           </div>
         );
       }
       export default NameForm;
      

      

      

      입력창에 출력되는것은 <h3>{name}</h3} 에 의한 것.

   6. 예시 : Pop up

       import React, { useState } from "react";
       import "./styles.css";
              
       function App() {
         const [showPopup, setShowPopup] = useState(false);
              
         const togglePopup = () => {
           // Pop up 의 open/close 상태에 따라
           // 현재 state 가 업데이트 되도록 함수를 완성하세요.
       	    const currenstate = showPopup ? false : true;
       	    setShowPopup(currentstate);
              		    
         };
              
         return (
           <div className="App">
             <h1>Fix me to open Pop Up</h1>
             {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
                 button tag를 완성하세요. */}
             <button className="open">Open me</button>
             {showPopup ? (
               <div className="popup">
                 <div className="popup_inner">
                   <h2>Success!</h2>
                   <button className="close" onClick={togglePopup}>
                     Close me
                   </button>
                 </div>
               </div>
             ) : null}
           </div>
         );
       }
              
       export default App;
              
      

      

Controlled component : React가 state를 통제할 수 있는 컴포넌트

https://reactwithhooks.netlify.app/docs/forms.html - 자세한 내용은 공식문서 참고

input에 값 입력 시, state도 그때그때 바뀌면(onChange) 되고 이 변경된 state와 input의 value 또한 같게 작성해야 함

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
      <div>{msg}</div>
      {/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 
      아래 textarea를 변경하세요. */}
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={(event) => {SetMsg(event.target.value}}
        value={"msg"}
      ></textarea>
    </div>
  );
}

React 데이터 흐름

1. 컴포넌트로 만들어놓고 합치기

   

2. 세분화

   

3. 도식화 - 컴포넌트나 데이터가 많을때 도식화하는 것이 중요함

   

4. 데이터는 위에서 아래로 흐름. 이동하는 것은 무조건 props

   

5. singleTweet은 개별이 아니라 모든사람의 tweet을 담아야 하므로 Tweets가 가지고 있어야 함. 단방향으로 흘러야 하기 때문

   

방법은 사실 2가지가 있음

search가 있기 때문에 전체 목록이 twittler에서 search와 tweets에 내려주고 singletweet에 각각 다시 내리기

search가 filtering을 하는 것이기 때문에 필터된 조건은 singleTweet

이정민이 담겨있는 데이터만 singleTweet으로 가지면되니까

전체 트윗목록이 최상위가 갖고있는것은 좋지 않음. = 메모리가 계속 상주해 있어서

react 카테고리 내 다른 글 보러가기