React를 시작하는 방법

React는 단일 페이지 웹 애플리케이션을 만드는 데 주로 사용되는 매우 인기 있는 자바스크립트 라이브러리입니다. React로 할 수 있는 일이 너무 많고 온라인에서 사용할 수 있는 튜토리얼도 많지만 여기서는 0에서 첫 번째 react 구성 요소로 이동하기 위해 따라야 할 단계에 대해서만 이야기하겠습니다.

시작하기 전에

최신 버전의 NodeJ가 필요합니다 . nodesource 에서 최신 버전을 설치할 수 있습니다 .

또한 JSX 구문에 익숙하지 않은 경우 이 링크를 확인 하십시오 .

개발 환경 설정

바로 사용할 수 있는 .js 파일을 로드하는 스크립트 태그를 웹페이지에 포함하여 즉시 React를 시도할 수 있지만, 그냥 시도하고 싶지 않기 때문에 적절한 방법이 아니라고 생각합니다. , 사용하고 싶습니다.

create-react-app 도구를 사용하여 기본 반응 앱이 어떻게 생겼는지 볼 수 있는 상용구와 파일을 저장하는 즉시 코드 출력을 보여주는 라이브 컴파일러를 설정할 수 있습니다.

모든 것이 설치되면 앱 폴더로 이동하여 npm start를 입력합니다.

구성 요소 및 소품 이해

구성 요소의 목적은 특정 이벤트가 발생할 때마다 표시할 무언가를 렌더링하는 것입니다. 재렌더링을 유발하는 이벤트를 정의해야 합니다. 구성 요소의 "상태 변경"에 대해 설명합니다.

props는 html 속성으로 변수를 통해 컴포넌트 함수에 전달되는 속성을 가진 객체입니다.

후크 이해

React는 처음에는 클래스를 사용하여 컴포넌트를 정의했지만 최근에는 함수를 사용하여 컴포넌트를 정의할 수 있게 되었으며 후크를 사용하면 이러한 함수 내에서 React의 다양한 기능에 액세스할 수 있습니다.

상태는 가장 기본적인 기능이므로 필요한 첫 번째 후크는 useState 입니다.

첫 번째 구성 요소

src 폴더에서 app.js(또는 typescript를 사용하는 경우 app.tsx) 파일을 찾아 엽니다. App( ) 함수가 첫 번째 구성 요소가 됩니다. return( ) 내부에 있는 내용과 그 위에 있는 내용을 삭제한 다음 매우 간단한 것을 시도해 보겠습니다.

이 코드를 return( ) 안에 넣으십시오.

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render( )는 React가 웹 페이지에 구성 요소를 "작성"할 수 있게 해주는 것으로 index.js(또는 index.tsx) 내부에서 찾을 수 있습니다.

상태 변경을 이해하기 위해 대부분의 자습서에서는 버튼을 클릭할 때마다 값을 증가시키는 카운터를 작성하는 방법을 보여줍니다.

첫 번째 플러그인

누구나 자신만의 후크를 만들 수 있으며 많은 사용자 지정 후크를 "플러그인"으로 사용할 수 있습니다. 그 중 하나 는 양식 표시 및 유효성 검사를 처리하는 react-hook-form입니다 .

RHF에서 useState가 로 대체 useForm 아주 잘 설명되어 준비를 위해 사용하는 기능을 포함.