프로그래밍(Programming)/React

React props로 데이터 전달하기

1. 부모 컴포넌트 부모컴포넌트에 props="value" 를 입력한다. (아래에 TodoList를 보면 todo="TODO" 라고 쓰여진 부분) function App() { return ( TODO LIST ); } 2. 자식 컴포넌트 props를 파라미터로 넘겨주고, {props.XXX}로 바인딩 해서 사용한다. XXX 부분에는 부모컴포넌트에서 옮겨준 이름을 사용하면 된다. {props.todo} 부분! import React from "react"; const TodoList = (props) => { return ( {props.todo} ); }; export default TodoList;

React : 클래스형(class) 컴포넌트, 함수형(function) 컴포넌트

각 컴포넌트를 만드는 법 1. 클래스형(class) 컴포넌트 class App extends Component { render(){ const name ='react'; return {name} 연습 } } class를 이용해서 만듭니다. 2. 함수형(function) 컴포넌트 function App() { const name = "react"; return {name} 연습; } function을 이용해서 만듭니다.

React 시작하기

1. React 프로젝트 만들기 $ npm init react-app or $ yarn create react-app

React 시작하기 전, 환경 구비

1. Node.js / npm 리액트를 사용하기 위해서는 Node.js가 필수적이다. 프로젝트를 개발하는데에 필요한 중요 도구들이 Node.js를 사용되기 때문. 다운로드 바로가기 > https://nodejs.org/ko/download/ 2. VSCode https://code.visualstudio.com/download 추천 Extensions ESLint : 자바스크립트 문법 정리를 위한 익스텐션. Reactjs Code Snippets : Prettier : 코드를 더 예쁘게! 자동으로 정리해준다.