[React] React 기초

JavaScript를 1도 모르는 상태에서 시작을 했기에 자세하게 하나 하나 적을 예정

[React] React 개발환경 설정

[React] React 개발환경

 

const는 es6부터 도입되어 바뀌지 않는 값을 선언할 때 사용한다. 반대로 바뀌는 값을 설정할 때는 let을 선언한다.

function varTest() {
	var a = 'hello';
    if (true) {
    	var a = 'bye'; 
      	console.log(a); // bye 
	} console.log(a); // bye 
}

if문안에서 bye라고 선언후 a라는 변수는 bye의 값을 계속 갖고 있다.

function letTest() {
	let a = 'hello';
    if (true) {
    	let a = 'bye';
        console.log(a); // bye 
    } console.log(a); // hello
}

var와 다르게 if문 안에서 bye로 변경하였지만, if문 안에서만 값을 갖고 있고, if문 나오게 되면 다시 hello 값을 갖게 된다.

react를 처음 공부하다 보면 렌더링 이란 단어를 많이 알게 듣게 되는데 렌더링부터 알고 넘어가는게 도움이 클꺼 같아 정의 한번함.

렌더링이란?

아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도. 주로 디자인 용어로 쓰임. -사전적 의미-

if문 사용

import React, {Component } from "react";

class App extends Component {
  render() {
    return (
        <div>
            {
                1 + 1 === 3
                    ? (<div> 맞아요!</div>)
                    : (<div> 틀려요!</div>)
            }
        </div>
    );
  }
}

export default App;

기본구조는 import로 불러와 사용을 한다. react경우 React를 반드시 import하여야 함. Component는 React에 있으며, 그걸 상속받아 render 설정한다.   1+1의 값에 따라 맞아요 / 틀려요 가 보임. 그리고 제일 밑줄에 export는 말 그대로 내보낸다는 말인데 어디서든 사용하게끔 설정함

and 연산자

import React, {Component } from "react";

class App extends Component {
  render() {
    return (
        <div>
            {
                1 + 1 === 2 &&  (<div> 맞아요!</div>)
            }
        </div>
    );
  }
}

export default App;

복잡한 비지니스 로직이 있을 경우는 함수를 만들어 처리하는게 좋아 보이지만 이렇게 간단한 if문을 사용하는 예제이다.

import React, {Component } from "react";

class App extends Component {
  render() {
      const value = 1;
      return (
          <div>
              {
                  (function () {
                      if (value === 1) return (<div>하나</div>);
                      if (value === 2) return (<div>둘</div>);
                      if (value === 3) return (<div>샛</div>);
                  }) ()
              }
          </div>
      );
  }
}

export default App;

위에 표현된 함수는 익명 함수이다. 처음에는 보고 오타인줄 알았는데, 함수를 바로 실행할 때 사용한다고 한다. 함수선언을 하고 함수 로직이 끝나자 '()' 이부분을 넣지 않으면 실행되지 않으니 꼭 넣어서 사용하자.

import React, {Component } from "react";

class App extends Component {
  render() {
      const value = 1;
      return (
          <div>
              {
                  (function () { //함수 선언 부분
                      if (value === 1) return (<div>하나</div>);
                      if (value === 2) return (<div>둘</div>);
                      if (value === 3) return (<div>샛</div>);
                  }) () //선언한 함수 호출부분
              }
          </div>
      );
  }
}

export default App;

 

style 객체화

import React, {Component } from "react";

class App extends Component {
  render() {
      const style = {
          backgroundColor: "red",
          padding: "16px",
          color: "white",
          fontSize: "15px"
      };

      return (
          <div style={ style }>
              안녕하세요
          </div>
      )
  }
}

export default App;

대부분 공통적으로 사용하는 css경우 {name}.css에서 만들어 사용하겠지만, react에서 객체화 시켜 Class안에서 자유롭게 만들어서 사용가능하다.

css파일 

//App.css
.App-test1 {
  background: cornflowerblue;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 500;
}

import React, {Component } from "react";
import "./App.css"

class App extends Component {
  render() {
      return (
          <div className="App-test1">
              React!
          </div>
      )
  }
}

export default App;

script를 아시는 분을 이상한게 보이실 수 있음. div 속성값으로 className을 사용한다. script로 표현하면 단순 class속성이다.