정복하고 싶다, 너란 Java의 세계.

클래스형 컴포넌트 import React from "react"; import PropTypes from 'prop-types'; /* 1. 클래스형 컴포넌트의 기본 뼈대 2. React.Component를 상속받는 것. 3. 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. 4. React.Component에서 제공하는 기능들을 상속받아 사용하기 위함. 5. 클래스형 컴포넌트를 사용하는 것은 state를 사용하기 위함. */ class App extends React.Component { /* 1. render() 함수를 선언하지 않았는데 사용할 수 있는 이유: React.Component를 상속 받았기 때문에. 2. 함수형 컴포넌트는 return 문이 JS..

리액트에서 map함수를 사용하는 경우의 key props 배열에 map함수를 활용해서 컴포넌트를 출력할 때 사용한다. 배열 길이가 10인 배열에 map함수를 통해서 10개의 컴포넌트가 출력될 경우, 리액트는 이 컴포넌트들이 다른 것들인지 구분하지 못한다. 각각 다른 컴포넌트들임을 알려주기 위해서 컴포넌트 props에 명시적으로 구분을 해주어야 한다. 컴포넌트마다 다른 id를 부여하고, 그 아이디를 key={id} 와 같은 리액트 내부에서 사용되는 특수 props를 사용해 이것들이 다른 컴포넌트임을 알려준다. key props는 내부 사용 특수 props라서 컴포넌트에 직접 전달되지 않는다. key props를 사용하지 않아도 프로그램 자체에서 오류가 발생하지는 않는다. 다만, key props를 입력해서..

props 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터. 컴포넌트의 props를 사용하면 컴포넌트를 효율적으로 재사용할 수 있다. 컴포넌트 매개변수 문자열이 아닌 경우 중괄호{}를 사용한다. import React from 'react'; function Food() { return I like Potato; } function App() { return( Hello World ); } export default App; 컴포넌트의 첫번째 인자로는 props가 전달된다. App컴포넌트에서는 props에 있는 데이터를 객체(Object)로 변환하여 Food 컴포넌트(함수)에 전달. import React from 'react'; function Food(props) ..

설치 목록 node.js npm ( node.js 설치시 함께 설치됨 ) npx 리액트 앱 프로젝트 생성 npx create-react-app ProjectName 예전에는 웹팩, 바벨과 같은 도구를 따로 설치해야 했지만 이제는 프로젝트를 생성하면 자동으로 셋팅이 된다. create-react-app은 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해 주는 도구이다. 리액트 앱 실행 npm start리액트 앱 종료 Ctrl + c 프로젝트를 실행한 터미널에서 입력. 터미널에서 바로 VSCode로 프로젝트 여는 방법. 프로젝트가 있는 디렉터리로 이동해서 아래 명령어 입력code ProjectName 보일러 플레이트(boiler plate) 개발을 바로 시작할 수 있..

1. React란 무엇인가 React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리다. 즉 React 프론트엔드 라이브러리다. Angular가 프레임워크인 데 반해 React는 라이브러리다. 즉, 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다. React는 컴포넌트 기반이다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 2. 왜 React를 사용하는가? 웹페이지를 만들기 위해서 굳이 프론트엔드 라이브러리를 사용해야 할 필요는 없다. HTML과 CSS, 그리고 순수 자바스크립트 만으로도 웹페이지를 얼마든지 제작할 수 있다. 특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브..