상태끌어올리기

문제
()번째 순서
()안에 들어가는 숫자를 + 1 이 되게 만들어라

App컴포넌트를 만들어줍니다
그 안에 카운터 상태를 만들어줍니다

const App = () => {
 
  const [counter, setCounter] = React.useState(1);
  console.log('234234');
 
 return(
 	<div>
   		<Title>{counter}번째 순서</Title>
    </div>
 );
}

생성을 했을때에 부르는 함수 -> handleFormSubmit();
함수내용 ↓

count Form = () => {
	function handleFormSubmit() {
 	setCounter(counter + 1);
}

}

함수내용을 보면 안에 counter 와 setCounter의 내용이 없어서 counter + 1을 못하고 있다

해결방법

1. SetCounter와 counter를 props로 넘겨준다
2. handleFormSubmit함수 전체를 위의 부모요소로 옮긴다

• App 컴포넌트로 함수전체를 옮겨준다
• 옮긴다음 Form 컴포넌트에는 handleFormSubmit이 없으니 인자로 handleFormSubmit을 넣어 handleFormSubmit함수내용을 받아온다

  • const Form = ({handleFormSubmit}) => {
    }

• props를 함수자체를 넘겨주는 것을 App에 선언된 Form에 적어준다
  props넘겨주기전상태

  Form /

props넘겨준후 상태

div

<Form handleFormSubmit=	{handleFormSubmit}>

/div