React

🤔리액트 사용 이유

먼저 페이스북의 상단 부분을 보자
조그만 한줄 부분이지만 , 실제 코드를 봤을때
실제 코드 부분은 상당량을 차지한다.
그렇다면 이 부분의 수정이 이루어진다면 페이지마다 저 부분을 바꾸어 주어야 하나?
또한 페이지 소스를 보고 어느 부분이 저 영역인지 찾기가 힘들다.

리액트를 사용한다면, 각자의 영역을 사용자 정의 태그(Component)를 사용하여
가독성을 높이고 , 재사용성이 높아지고, 유지 보수의 장점이 생긴다.
Component를 알아보기 전에 JSX부터 알아보자.

jsp에서도 페이지 분할해서 하지않나? 뭐가 더 좋아진거지 라는 의문이 생김

리액트는 가상 돔을 사용하여 웹 애플리케이션의 성능을 극대화
리플로우(Reflow):DOM 조작으로 레이아웃 과정이 다시 진행되는 것
리페인트(Repaint):페인팅 과정이 다시 진행되는 것
ex)
사용자가 Todo 리스트 앱을 사용할 때,
아무것도 없던 리스트에 할일을 하나 추가하는 과정을 생각해 봅시다. 할일을 입력하고 추가 버튼을 누르면, 아무것도 없던 리스트에 할일을 하나 표시하고, 전체 할일 개수를 표시합니다. 이 때, 가상 돔이 없는 경우, 할일을 하나 표시하기 위해 리플로우/리페인트가 한 번 발생하고, 전체 할일 개수를 표시하기 위해 리플로우/리페인트가 다시 한 번 발생하게 됩니다.
하지만, 리액트에서는 이 모든 과정을 가상 돔에서 수행합니다. 따라서 사용자가 할일을 입력하고 추가 버튼을 누르면, 할일 표시, 전체 할일 개수를 표시하기 위해 가상 돔에서 계산을 한 후, 계산 결과를 브라우저에 전달하여 리플로우/리페인트를 한 번만 수행하도록 합니다.

출처 : https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

---

😊 JSX 는 뭐야?(Java Script XML)

결론

1.페이스북에서 만든 컴퓨터 언어쯤이라 생각.
2.jsx를 create-react-app이 JavaScript로 Converting.

JSX의 ex)

HTML도 아니고 , JavaScript도 아님,,

JS의 ex)

JS에서확장된 문법이라고 적혀있지만, 규칙은 살짝 다른 느낌이다.

공식 문서의 JSX의 설명

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다

속성 값 넣는 방법:

"" 을 이용해 문자열을,
{}를 사용해 JavaScript 표현식 사용가능

3개 다 같은 element,

속성(className)은 props에 들어가는 것 뿐만 아니라
children에 내용이 들어간다

💡 주의 위 아래 같은 tag로 감싸져야한다.(규칙)

---

📋 엘리먼트

React 앱의 가장 작은 단위

<div id="root"></div>

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

// root라는 ID값을 가진 곳에 element를 render()해준다

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트하여 효율적

🤔컴포넌트와의 차이?

개념적으로 컴포넌트는 JavaScript 함수와 비슷
“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환.
element가 더 하위의 개념(화면에 어떻게 표시되는지의 느낌)

---

📝 Function Component, Class Component

Function : props를 가지고 다녀야한다.
Class : extends Component를 하고 render()함수를 이용한다.
차이점: : props를 가지고 올때 this 사용하는지의 차이도 존재.

class보단 Function 많이 사용하는 추세라고 한다~
Why? Life Cycle 차이점
클래스 컴포넌트는 props를 재사용하기 때문에 개발자의 예상과 다르게 동작할 수 있는 문제점이 존재,
별도의 예방 작업을 해 주어야 하지만 함수형 컴포넌트는 이러한 문제점이 발생하지 않는다고 한다.
자세한 내용은 밑에 출처참조.
출처: https://boxfoxs.tistory.com/395

---

⭐️ 순수함수

먼저 props는 읽기 전용이라는 사실과
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. 라는 규칙이 있다.
순수함수란?
입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문입니다.

순수함수
function sum(a, b) {
  return a + b; //동일한 입력값 (ex, 1,2), 동일한 결과 (ex return 3 )
} 

순수함수 X
function withdraw(account, amount) {
  account.total -= amount; // 자신의 입력값을 바꾼다
}

---

🚀 State and Lifecycle

1초마다 render되는 시계를 만들려고한다.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000); // 1초마다 tick function 호출

위 코드의 문제점:
Clock이 타이머를 설정하고 매초 UI를 업데이트하는 것이 Clock의 구현 세부사항이 되어야 합니다.
즉, Clock이 스스로 업데이트를 해야한다. -->State 사용

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() { //생명주기 메소드
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() { // 타이머 멈추기
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date() // state의 date 값 변경 코드 
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2> //this.state.date = new Date()
      </div>
    );
  }
}

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

🔥Function에서는 state 쓰는 방법 hook개념 필요

class 컴포넌트의 경우 State를 바로 사용 가능하다
하지만 Function 컴포넌트 경우 Hooks를 이용해야한다.
useState()함수를 통해 state 값 관리 가능

전체적인 문법

import React, { useState } from 'react'; 
//Hooks가 useState()함수 달아줌


function 컴포넌트(props) {
  const [값변수, 값변경함수] = useState(기본값);

  const 값변경함수 = () => {
  //변경될 코드
  }
  return(
  	<></>
  );
}

예제 코드

import React, { useState } from 'react'; //Hooks가 useState()함수 달아줌

//+버튼과 -버튼생성해서 숫자를 변화시키는 컴포넌트
function Counter(props) {
    //num : 지정될 숫자 - 변수에 담기
    //setNum : 변화될 숫자 - 변수에 담기
    const [num, setNum] = useState(0); //기본값을 0으로 처리

    //1씩 증가할 함수
    const onIncrease = () => {
        setNum(num + 1); //클래스컴포넌트의 setState()함수처럼 사용
    }

    //1씩 감소할 함수
    const onDecrease = () => {
        setNum(num - 1); //클래스컴포넌트의 setState()함수처럼 사용
    }
    
    

    return (
        <div style={style}>
            <h1>값변화 : { num }</h1>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
}

export default Counter;

🔥 주의:State 업데이트는 비동기적일 수도 있습니다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

함수의 파라미터로 넘겨주는게 맞다.
함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 
업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 수도 있다.

---

😕 Props vs State

리액트 Component에서 다루는 데이터는 2개 : Props, State
props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값
자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다.

state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 가능.
💡 주의 변경할때 state = value 하면 안되고 setState = value로 바꿔주어야 한다.

출처: https://velopert.com/3629

---

😱 이벤트 처리

HTML vs React 차이

HTML
	<button onclick="activateLasers()">
  		Activate Lasers
	</button>
    
    
React
	<button onClick={activateLasers}>
 		Activate Lasers
	</button>
    
HTML
	<form onsubmit="console.log('You clicked submit.'); return false">
  		<button type="submit">Submit</button>
	</form>

React
    function Form() {
	function handleSubmit(e) {
 	e.preventDefault();
        console.log('You clicked submit.');
  	}
 	 return (
    		<form onSubmit={handleSubmit}>
      			<button type="submit">Submit</button>
    		</form>
 	 );
   }