Hook Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수이다. Hook은 class 없이 React를 사용할 수 있게 해준다. useState, useEffect와 같이 React에서 자체 지원하는 내장 Hook이 있으며, 직접 custom Hook을 만드는 것도 가능하다. Hook 사용 규칙 Hook을 사용할 때에는 두 가지 규칙을 준수해야 한다. 1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. React에서는 한 컴포넌트에서 State나 Effect Hook을 여러 개 사용할 수도 있다. function Form() { // 1. name이라는 state 변수를 사용 co..

Props란? Props는 properties의 약자로, React에서 지원하는 JavaScript 객체이다. 컴포넌트를 사용할 때, props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 수 있다. 사용 function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } 위 코드를 살펴보면 1. App 컴포넌트에서 Welcome 컴포넌트를 세 번 호출한다. 2. props의 name으로 각각 "Sara", "Cahal", "Edite"이라는 정보를 전달한다. 3. Welcome 컴포넌트에서는 매개변수로 받은 props에서 props.name의 정보를 가져와 아래와 같이 출력된다.

State란? state는 React에서 지원하는 JavaScript 객체로, 렌더링 결과물에 영향을 주는 정보를 가지고 있다. useState useState를 이용하여 state와 state의 값을 수정할 수 있는 함수를 생성하고, 초기값을 설정할 수 있다. 아래와 같은 코드가 있다고 할 때, const [state, setState] = React.useState(0); // state 선언 및 초기화. 초기값: 0 "state" 자리에 state명을 넣고, "setState"에는 값을 수정할 함수명, useState의 매개변수에 초기값을 넣어 사용한다. 값을 수정할 함수명이 set + "state명"일 필요는 없다. setState function onClick() { setState((state..