React start

React 시작하기

1. nodejs 최신버전 (최신버전 중요) 설치

2. VS code 에디터 설치

3. 작업폴더를 에디터로 open folder

4. 에디터의 터미널에 npx create-react-app 프로젝트명 입력

5. 생성된 프로젝트명 폴더를 에디터로 open folder

6. App.js에서 코딩

7. 미리보기 띄우기는 터미널에서 npm start

npx create-react-app blog

  • npx : 라이브러리 설치 도와주는 명령어(nodejs 설치 되어있어야 이용가능)
  • create-react-app : React 세팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리
  • blog : 프로젝트명

nodejs 설치이유

Create React App 라이브러리 사용하기 위해
nodejs 설치 -> npm 툴 사용가능 -> npm으로 Create React App 쉽게 사용 가능

파일 분류

  • App.js : index.js에서 root로 렌더링 되는 페이지
  • index.js : react app의 가장 먼저 진입점이 되는 js파일
  • public/index.html : 실제 메인페이지
  • node_modules : 라이브러리 모은 폴더
  • public : static 파일 보관함
  • src : 소스코드 보관함
  • package.json : 설치한 라이브러리 목록

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
  • App.js를 받아 root로 렌더링
  • serviceWorker : 오프라인일 때 리소스를 캐싱하여 온라인처럼 보여주는 모듈, default는 unregister로 되어있으며 필요시 변경

React Component 개념

React Component = JavaScript 함수 React Props = 함수 파라미터 React Element = 변수 JSX = HTML 태그 묶음 = JavaScript 안의 HTML

index.js에서 App.js 파일을 index.html에 적용시킴

React 장점

  • {변수명, 함수 등} 으로 데이터 바인딩이 쉬움
  let post = '변수';
  <h4>{post}</h4>
  • src, id, href 등의 속성에도 {변수명, 함수 등} 사용
  import logo from './logo.svg';
  
  <img src = {logo}/>
  • JSX에서 style 속성 집어넣을 때
    style = {object 자료형으로 만든 스타일}
  <div style=></div>
  
  let post = { color : 'blue', fontSize : '30px' }
  <div style = {post}></div>

state에 데이터 넣기

import React, {userState} from 'react';

let [a,b] = useState('리액트 공부');

a에는 state 데이터 '리액트 공부' 들어감
b에는 state 데이터 변경 함수 들어감
[state 데이터, state 데이터 변경 함수]
  • ES6 destructuring 문법
var [a,b] = [10,100];
a에는 10, b에는 100 들어감

array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용

  • state에 데이터 저장하는 이유는 웹이 App처럼 동작하게 만들고 싶을 때 (state는 변경되면 HTML이 자동으로 재렌더링)
  • 자주 바뀌는 중요한 데이터는 변수말고 state로 저장
  • state는 Component 안에서 사용되는 비공개 함수
  • 선언된 Component 안에서만 사용이 가능하며 state는 직접 수정하지 않아야 함, this.setState() 함수를 사용하여 수정

EventListener 문법

  • 이벤트 다루는 법
onClick = { 클릭될 때 실행할 함수 }
onClick = { ()=>{실행할 내용} }
  • state는 state 생성 시 만드는 변경함수로 값 변경
import React, {userState} from 'react';

let [state,state변경함수] = useState('리액트 공부');
onClick={ ()=>{ state변경함수(state+1) } }

state가 Array, Object 자료형일 때 데이터 변경

  • state의 복사본을 만들어서 수정
import React, {userState} from 'react';

let [state,state변경함수] = useState('리액트 공부');
onClick={ ()=>{ state변경함수(state+1) } }

function 값변경(){
var newArray = [...state];
newArray[0] = '너구리';
state변경함수(newArray);
}
  • state를 직접 수정하는 방법은 비추천
  • ES6의 … 문법을 통해 deep copy 해서 변경함수를 이용하여 state 변경

리액트의 Component 문법

HTML을 한 단어로 줄여서 쓸 수 있는 문법

<div className="modal">
  <h2>제목</h2>
  <p>날짜</p>
  <p>상세내용</p>
</div>


<Modal/>

function Modal(){
  return(
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
  • 이름은 대괄호
  • return() 안에 있는 것은 태그하나로 묶어야함

Categories:

Updated:

Comments