ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 입문
    Computer Science/React 2019.02.23 18:24

    개발 Version

    Node.JS 11.9.0

    NPM 6.5.0

    Python 2.7.15

    React 16.8.3

    Code Editor: Visual Studio Code 

    각각 설치 후 비주얼 스튜디오 코드에서 터미널을 연다.

    리액트 프로젝트 폴더를 만들 위치에서

    create-react-app <프로젝트명> 입력하면 리액트 프로젝트 폴더가 생성된다.

    비주얼 스튜디오 코드에서 리액트 프로젝트 폴더를 연다.

    App.js -> 실질적인 웹 사이트 화면에 대한 내용 출력을 담당

    App.css -> App.js와 연동되어 웹 사이트의 메인 부분에 해당하는 내용의 디자인을 담당.

    JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 

    리액트 개발에 엄청난 도움을 준다.

    1. 

    JSX를 사용하려면, React를 import 해줘야 한다.

    컴포넌트를 만드는 방법은 두 가지가 있다. 클래스와 함수

    여기서 클래스의 특징은 render 함수가 있어야 한다.

    2.

    JSX 특징

    꼭 닫혀야 하는 태그, 감싸져 있는 엘리먼트

    조건부 렌더링(출력)

    삼항 연산자 ===

    조건 ? A : B

    조건이 true 경우에는 A false 경우에는 B

    AND 연산자 &&

    조건이 true 일때만 보여주고, false 경우 아무것도 안 보여줌.

    즉시 실행 함수 포현(IIFE, Immeidately Invoked Function Expression)

    정의되자마자 즉시 실행되는 Javascript Function

    Ex)

    1
    2
    3
    (function () {
        if(value === 1return (<div>One</div>);
    })();
    cs

    3.

    style 과 className

    style은 리액트에서 객체 형태로 작성한다.

    리액트 컴포넌트에서 className을 사용해서 클래스를 설정한다.

    주석은 {/* ... */} 사이에 넣거나, 태그 사이에 넣을 수도 있다.



    댓글 0