immersive TIL # 13

paxkk·2020년 8월 20일

리액트는 페이스북에 만든 UI 컴포넌트 라이브러리다.
부모 컴포넌트에서 자식 컴포넌트로만 데이터를 주는 단반향 데이터 흐름이다

React 주요 개념

props (불변성)

상위 컴포넌트가 하위컴포넌트에게 내려주는 데이터
하위 컴포넌트는 단순히 사용만 가능하고 변경은

import React from 'react';
import Hello from './Hello';

class App from React.component {
  render(){                    //클래스 컴포넌트에 function이 생략된 render 함수
    return (
      <Hello name="react" />
    );
  }
}

export default App;

아래 Hello.js에서 name 값을 조회하고 싶은경우 this.props.name을 조회하면된다.

import React from 'react';

class Hello extends React.Component {
  render(){
    return 
       <h1>Hello, {this.props.name}</h1>;
  }
};

export default Hello;

state (가변성)

컴포넌트가 갖는 상태
객체의 형태로 컴포넌트내에서 보관하고 관리한다.
class 컴포넌트로 작성되어야 한다.
값은 변경 할 때 setstate 메서드 사용
직접 tstate를 변경하면 안되고 this.setState를 사용 왜냐하면,
render() 함수로 화면을 그려주는 시점은 리액트 엔진이 정하기 때문이다.
state 값을 직접 변경해도 render() 함수는 새로 호출되지 않는다.
setState() 함수로 state를 변경하면 리액트 엔진이 자동으로 render() 함수를 호출하면서 화면에 변경된 state를 새로 출력한다.
setState를 render()안에서 사용하게되면 리액트는 render메소드를 호출하면 변경된 state를 출력하므로 render()안에서 사용시 무한루프에 빠진다.

JSX

작성한 react 컴포넌트를 화면에 보여주기 위해 사용한다.
반드시 하나의 엘리먼트로 모든 엘리먼트가 감싸져 있어야한다.
자바스크립트 코드를 적용 할 땐 {} 안에 작성한다.
JSX 내부에서 if문을 사용하지 못하고 대신 삼항연산자를 사용한다.
엘리먼트에 클래스 이름을 적용할 때에는 className을 사용한다.

import React from 'react';     //import 를 사용하여 리액트를 불러온다 
import Hello from './Hello';   //Hello.js과 동일 

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div {name}</div>        //JSX
    </>
  );
}

export default App;