리액트 / 상태 use state

*영어대사를 입력해주세요 생성(submit)을 눌렀을때 콘솔창에 카운터1 카운터2 누를때마다 숫자가 올라감 

const Form = (props) => {
      const counterState = React.useState(1);
      const counter = counterState[0];
      const setCounter = counterState[1];
      console.log("카운터", counter);
      function handleFormSubmit(event) {
        event.preventDefault();
        console.log("폼 전송됨");
        setCounter(counter + 1);
      }
      return (
        <form onSubmit={handleFormSubmit}>
          <input type="text" name="name" placeholder="영어 대사를 입력해주세요" />
          <button type="submit">생성</button>
        </form> ); }

 

-이때 자바스크립트 문법으로 빨간글씨를 단축해서 기입

      const counterState = React.useState(1);
      const counter = counterState[0];
      const setCounter = counterState[1];

                           ↓

     const [counter, setCounter] = React.useState(1); 

 

*lifting state up / 상태 끌어올리기

자식컴포넌트안에서만 쓰이던 상태를 상위컴포넌트에서 같이 쓰고싶을때 

 

상태를 부모컴포넌트에 넣고 자식컴포넌트에 props로 넘겨준다고 생각하면된다

 

부모 컴포넌트

    const App = () => {
      const [counter, setCounter] = React.useState(1);

      console.log("카운터", counter);
      function handleFormSubmit(event) {                         →            자식한테 가져온 상태 
        event.preventDefault();
        console.log("폼 전송됨");
        setCounter(counter + 1);
      }
      return (
        <div>
          <Title>{counter}번째 고양이 가라사대</Title>
          <Form handleFormSubmit={handleFormSubmit} />               →         심어주기 위함 
          <MainCard img="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
          <Favorites /></div> )}

 

자식 컴포넌트 

const Form = ({ handleFormSubmit }) => {                                   →         props처럼 심은거   
      return (
        <form onSubmit={handleFormSubmit}>
          <input type="text" name="name" placeholder="영어 대사를 입력해주세요" />
          <button type="submit">생성</button>
        </form>
      );
    }

 

*생성을 눌렀을때 고양이 사진 바꾸기 

 

1.APP 안에 

const [mainCat, setMainCat] = React.useState(CAT1); 라고 상태를 추가 

 

2.바뀔 이미지 

const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript;

 

3. function에 setMainCat(CAT2); 추가

4. return에 <MainCard img={mainCat} />변경