천천히 느리게 천천히 느리게

1. props ◎ props는 properties의 줄임말로, 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용해야 한다. 2. props의 사용법 ◎ 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 해보자. 그러면, 다음과 같이 코드를 작성하면 된다. Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 코드를 작성해보자. 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면, props.name을 조회하면 된다. 3. 여러개의 props, 비구조화 할당 ◎ Hello 컴포넌트에 또 다른 props(color)를 전달..

1. 컴포넌트 만들기 ◎ component를 만들 때는 클래스 component와 함수형 component가 있다. 예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다. 그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다. 자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자. 리액트 컴포넌트를 만들 때는 import React from 'react'; 를 통하여 리액트를 불러와 주어야 한다. 그리고 코드의 최하단에는 export defualt Hello; 를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 ..

1. React 란 ◎ React는 페이스북에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 페이스북을 비롯하여 Airbnb, Netflix, Twitter 등 세계를 선도하는 서비스들이 React를 사용하고 있다. 그중에서도 에어비앤비와 넷플릭스는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있다. 2. Framwork? Library? ◎ React가 프레임워크인지, 라이브러리인지 헷갈려하는 개발자도 있습니다. React는 Angular 같은 Framwork가 아니라 Library이다. Router처럼 웹을 만드는 게 꼭 필요한 도구들이 기본적으로 포함되어있지 않다. 그 대신 가볍고 무엇보다 훨씬 빠르게 배울 수 있다. 3. 특징..