3. 리액트 기초 개념 알아보기

컴포넌트, JSX, props 이 3가지 개념을 꼭 알아야 리액트 앱을 잘 만들 수 있다.

App()함수의 반환값이 많아지면 소괄호로 감싸야된다.

App 컴포넌트를 임포트해서 사용한것을 볼 수 있다.

ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다.

두 번째 인자에는 컴포넌트가 그려질 위치를 전달하면 된다.

Potato 컴포넌트를 만들어보자.

작성할 때 중요한 규칙은 이름은 대문자로 시작해야된다.

그리고 컴포넌트가 반환할 값은 JSX로 작성한다.

export default Potato;를 추가하면 다른 파일에서 Potato 컴포넌트를 사용할 수 있다.

App 컴포넌트가 반환할 값으로 <Potato />를 추가해보자.

리액트가 <Potato />를 해석해서 <h3>I love potato</h3>로 만든것이다.

컴포넌트는 JSX로 만들고, JSX는 자바스크립트와 HTML을 조합한 문법을 사용한다는 말이 이해가 될 것이다.

App안에도 컴포넌트를 작성할 수 있다.

props : 컴포넌트에서 컴포넌트로 전달하는 데이터를 말한다.

매개변수를 이용하면 함수를 효율적으로 재사용할 수 있는 것처럼 props를 사용하면 컴포넌트를 효율적으로 재 사용할 수 있다. 불리언 값, 숫자, 배열 같은 다양한 형태의 데이터를 담을 수 있다.

중요한 점은 문자열인 경우를 제외하면 모두 중괄호 ({})로 값을 감싸야 한다는 점이다.

props를 사용해보자.

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.

프론트엔드