안녕하세요~ totally 개발자입니다. List, map 오늘은 리스트 즉 배열과 map을 활용하여 리액트 JSX로 출력해보는 실습을 해보도록 하겠습니다. Step 1: Student.js 파일을 만들어줍니다. props를 전달받아 firstName, lastName을 출력할 수 있는 리스트를 만들어줍니다. import React from 'react'; function Student(props) { return ( {props.firstName} {props.lastName} ) } export default Student; Step 2: StudentComponent.js 파일을 만들고 아래처럼 코드를 작성해줍니다. 제일 중요한 부분은 태그 사이에 있는 {students.map 부분이며 이 map을..

안녕하세요~ totally 개발자입니다. useEffect Hook (훅) 저번 시간에는 useState에 대해 살펴보았고 이번에는 useEffect Hook에 대해 살펴보도록 하겠습니다. 앞서 클래스형 컴포넌트에는 생명 주기(Lifecycle)가 있다고 이야기하였습니다. 이를 함수형 컴포넌트에서도 사용할 수 있도록 도입된 것으로 먼저 클래스형 컴포넌트에서의 생명주기(Lifecycle)에 대한 이해가 필요합니다. 간단하게 정리하면 아래 표와 같습니다. 단계 의미 클래스형 컴포넌트 사용 예제 함수형 컴포넌트 사용 예제 componentDidMount 컴포넌트가 마운트되었을 때, 마운트(Mount)란 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미 componentDidMount() {} useEffe..

안녕하세요~ totally 개발자입니다. State 함수형 컴포넌트 State(상태)에 관해 살펴보도록 하겠습니다. 리액트는 컴포넌트를 조합하여 페이지를 만들어가는 방식이고 각각의 컴포넌트의 상태를 관리해서 업데이트하는 방식입니다. 바로 useState를 사용하면 되는데, 기존에 만든 form을 사용해서 form이 제출되었을 때 아래에 입력한 사용자의 정보를 출력해줄 수 있도록 상태를 업데이트하여 UI를 재랜더링해줄 수 있도록 합니다. 기존 클래스형 컴포넌트에서는 setState를 사용해서 업데이트하는 반면 함수형 컴포넌트의 useState를 사용하는 경우에는 setState용의 함수를 지정하기 때문에 그 함수를 사용해서 업데이트해야 합니다. Step 1: 먼저 import React, { useStat..

안녕하세요~ totally 개발자입니다. Event 오늘은 함수형 컴포넌트의 이벤트, 버튼 클릭했을 때 이벤트를 만들어보도록 하겠습니다. Step 1: HelloWorldComponent.js 파일에서 7번째 줄처럼 button를 추가하고 onClick={} 형태로 적어줍니다. 여기에 바로 자바스크립트 코드를 넣어주셔도 되고 사전에 함수를 선언하여 여기에 적어주면 됩니다. 먼저 () => alert 방식으로 바로 넣어주었습니다. 버튼을 눌렀을 때 alert 메시지가 잘 나오는 것을 확인할 수 있습니다. Step 2: Step 1에서 사용했던 것처럼 그대로 onClick 안에 적어주는 것보다는 다음처럼 함수를 미리 선언한 후에 넣어주는 것을 권장합니다. Step 3: 이번에는 양식 제출(Form Submi..

안녕하세요~ totally 개발자입니다. props 오늘은 props에 대해 살펴보도록 하겠습니다. props는 properties로 컴포넌트에 값을 전달할 때 사용됩니다. Step 1: 저번 시간의 App.js 파일에서 HelloWorldComponent에 firstName, lastName, age를 부여하여 HelloWorldComponent로 전달합니다. Step 2: HelloWorldComponent.js 파일을 열고 3번째 줄에 Argument(인자)로 props 변수를 작성하시고 6번째 줄에 중괄호로 감싸서 props.firstName로 App.js에서 부여된 데이터를 가져올 수 있습니다. Step 3: 결과입니다. Step 4: 그 다음에는 defaultProps에 대한 사용인데, 함수형..

안녕하세요~ totally 개발자입니다. 클래스형 컴포넌트 저번 시간에는 함수형 컴포넌트에 대해서 살펴보았고 이번 시간에는 클래스형 Component에 대해 살펴보도록 하겠습니다. 기본적으로 클래스형과 함수형 컴포넌트의 역할을 동일합니다. 하지만 함수형 컴포넌트가 선언하기가 더 편리하며 메모리를 덜 사용하는 장점이 있습니다. 예전에는 상태 및 lifecycle에 대한 기능을 사용할 수 없었지만 React의 Hook이 도입되며 이 문제는 해결되었습니다. 함수형 컴포넌트는 다른 말로 stateless, 클래스형 컴포넌트를 stateful로 구분하여 나눌 수도 있는데, 그 이유는 클래스형 컴포넌트는 로직과 상태를 클래스 내에서 작동시킴으로 구현되지만 함수형은 props를 통해 데이터를 전달받는 구조라 stat..