React 시작 - (1)

in FRONTEND / React
React 시작 - (1)

‘React JS는 UI를 Interactive하게 만들어준다’

React JS는 UI를 Interactive하게 만들어준다. 웹사이트에 interactivity(상호작용)을 만들어준다.

React JS는 어플리케이션이 아주 interactive하게 만들어주는 library이고, React-DOM은 라이브러리 또는 패키지인데, 모든 React element들을 HTML body에 둘 수 있도록 해준다.

React JS는 엔진과 같다.

ReactDOM.render()

react element를 html에 배치

ReactDOM.render(span, root); span을 root 안에 배치

JSX

Javascript를 확장한 문법.

HTML과 생긴게 비슷해서 JSX로 React 요소를 만드는 게 편하다.

브라우저는 JSX를 이해못하므로 변환해줘야한다. 이때, babel 이용한다.

컴포넌트의 첫 글자는 대문자여야 한다. 대문자가 아니라면 JSX와 React는 html 태그로 판단해버린다.

    const root = document.getElementById("root");
    function Title() {
        return(
      <h3 id="title" onMouseEnter={() => console.log("Mouse Enter")}>
        Hello I am a title
      </h3>);
    } // 함수로 표현할 경우

    const Btn = () => (
      <button id="btn" style= onClick={() => console.log("I'm clicked")}>
        Click Me
      </button>
    );// 화살표 함수로 표현할 경우
    const Container = () => (
        <div><Title /><Btn /></div>
    );
    ReactDOM.render(<Container />, root);

Vanilla js에서 요소가 변경될되는 (ex. 버튼 클릭 수 표시) 변경이 발생하는 html 요소 전체가 업데이트되지만, React JS에서는 변경되는 부분만 갱신이 발생함

const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render(); // 다시 화면이 새로고침되어야 카운터가 화면에 반영됨
}

function render() {
  ReactDOM.render(<Container />, root); 
}

const Container = () => (
   <div>
     <h3>Total clicks : {counter}</h3>
     <button onClick={countUp}>Click me</button>
   </div>
);
ReactDOM.render(<Container />, root);

const root = document.getElementById("root");
const App = () => {
  const data = React.useState();
    console.log(data);
    <div>
      <h3>Total clicks : 0</h3>
      <button>Click me</button>
    </div>
  };
ReactDOM.render(<App />, root);

콘솔창을 보면 undefined값과 함수를 지닌 배열을 보여준다.

배열의 첫번째 값은 초깃값이고, 두번째 요소는 그 값을 바꾸는 함수이다.

const root = document.getElementById("root");
const App = () => {
 const [counter, setCounter] = React.useState(0);
 const onClick = () => {
   setCounter(counter + 1); // counter를 counter + 1로 변경시켜줌
 };

  return(
    <div>
      <h3>Total clicks : {counter}</h3>
      <button onClick={onClick}>Click me</button>
    </div>
  )
};
ReactDOM.render(<App />, root);

modifier 함수를 가지고 state를 변경할 때 컴포넌트가 재생성된다. 새로운 값을 가지고 리랜더링 되는 것이다.

React js의 핵심

  • 데이터가 바뀔때마다 컴포넌트를 리렌더링 하고 UI를 refresh하는 것이다.

  • HTML요소를 생성하거나 찾을 필요도 없고, 이벤트리스너를 추가해줄 필요도, UI를 업데이트 해줄 필요도 없다.