함수형 컴포넌트
-
[TIL] Function component props 를 통해 컴포넌트에게 값 전달하기Develope/React 2020. 5. 10. 17:07
1. props ◎ props는 properties의 줄임말로, 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용해야 한다. 2. props의 사용법 ◎ 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 해보자. 그러면, 다음과 같이 코드를 작성하면 된다. Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 코드를 작성해보자. 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면, props.name을 조회하면 된다. 3. 여러개의 props, 비구조화 할당 ◎ Hello 컴포넌트에 또 다른 props(color)를 전달..
-
[TIL] Function component, JSXDevelope/React 2020. 5. 8. 21:01
1. 컴포넌트 만들기 ◎ component를 만들 때는 클래스 component와 함수형 component가 있다. 예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다. 그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다. 자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자. 리액트 컴포넌트를 만들 때는 import React from 'react'; 를 통하여 리액트를 불러와 주어야 한다. 그리고 코드의 최하단에는 export defualt Hello; 를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 ..