해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 사이트를 제작하다보면 특정 조건에 따라 다른 컴포넌트를 보여주고 싶을 수 있습니다. 예를들어 로그인, 회원가입 버튼이 있습니다. 로그인을 하지 않은 상태에는 로그인 버튼이 보여져야하고, 로그인을 한 상태에서는 로그인 버튼이 사라지고 로그아웃 버튼이 렌더링 되어야 합니다. 리액트에서는 조건부 렌더링을 어떻게 하는지 알아보겠습니다. App.js에 함수 컴포넌트로 LoginButton과 Logout..

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트의 이벤트 문법 - 소문자가 아닌 카멜케이스로 작성합니다. onClick={activatelasers} (x) onClick={activateLasers} (o) - 문자열이아닌 함수로 전달합니다. onClick="함수이름()" (x) onClick={함수이름} (o) 기존 HTML Activate Lasers React Activate Lasers 이벤트 기본 동작 방지 Click me..

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 이전 포스팅에서 props에 대해서 알아보았습니다. props는 컴포넌트에 프로퍼티로 전달되고, 읽기전용입니다. 이번 포스팅에서는 read write둘다 할 수 있는 state라는 개념에 대해서 알아보겠습니다. 1초마다 째깍대는 시계 만들기 Clock컴포넌트 생성하기 컴포넌트 내부에서 모든것이 통제되는 캡슐화된 Clock 컴포넌트를 만들것입니다. 기존 src폴더 내부에 components폴더를..

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 생성 리액트에서 컴포넌트를 생성하는 방법은 두가지 입니다. 첫번째로 함수를 정의하는 방식입니다. function Welcome(props) { return Hello, {props.name}; } 위의 함수는 엘리먼트를 return하기 때문에 컴포넌트이고, 함수로 정의되었기 때문에 함수 컴포넌트라고 불립니다. 두번째로는 class로 정의하는 방식입니다. class Welcome ext..

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 이전에 생성했던 src/app.js의 소스코드를 수정하겠습니다. import React from 'react'; import logo from './logo.svg'; import './App.css'; //추가 const element = This is JSX; function App() { return ( Hello React! {/*추가*/} { element } Learn React )..

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 프로젝트를 만들기 위해선 creact-react-app을 이용합니다. npm install -g create-react-app create-react-app 프로젝트이름 저는 프로젝트이름을 react-tutorial으로 생성하였습니다. cd react-tutorial npm start 해당 폴더로 접근한 뒤 npm start로 실행할 수 있습니다. 정상적으로 리액트 페이지가 로드됩니다...