React 파헤치기

React Orientation

1. 리액트의 특징

npmtrend.com으로 본 리액트의 활용도 -> 꾸준히 높은 활용도를 보여줌

React 란? :
컴포넌트 기반의 UI 자바스크립트 라이브러리
SPA(Single Page Application)을 쉽고 빠르게 만들어주는 라이브러리 도구

여기서 잠깐, SPA는 뭘까?

SPA VS MPA

SPA -> 리액트

• 한 개(Single)의 Page로 구성된 Application
• 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
• 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다.

MPA

• 여러 개(Multiple)의 Page로 구성된 Application
• 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
• 사용자가 새로운 페이지를 이동하면 전체 페이지를 다시 렌더링한다
  
  
  
  
  
  

React의 역사

• React의 현재 버전은 V18.0.0(2022년 4월)
• React.JS는 2011년 Facebook의 뉴스피드 기능에 사용
• Facebook 소프트웨어 엔지니어인 Jordan Walke가 만들었음
  
  

React의 특징

• Virtual DOM 사용으로 필요한 요소만 빠른 업데이트
• 반복되는 요소를 컴포넌트화
• JSX문법 사용 : html + js 합친 문법 사용
• 리액트 네이티브를 통한 모바일 앱 개발 가능
  
  
  
  
  
  

Virtual DOM 개념

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁다. 따라서 React에서는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리한다. 쉽게 말해서, Virtual DOM은 DOM의 요약본이라고 볼 수 있다.

-> 즉, Virtual DOM에서 변경사항을 감지하여 DOM에 알려주어 DOM은 전체를 렌더링 할 필요없이 변경사항만 바꿔줄 수 있다.
사소한 변경사항에도 전체가 리렌더링되기 때문에 브라우저에 과부하가 올 수 있기 때문에 Virtual DOM의 역할은 중요하다.

2. JSX란

JSX란? :
자바스크립트와 XML/HTML 을 함께 사용할 수 있는 자바스크립트의 확장문법

JSX의 역할

• JSX로 작성된 코드는 모두 자바스크립트 코드로 변환

• 리액트는 JS코드를 모두 createElement() 함수를 사용하는 코드로 변환

  JSX의 장점

• 코드가 간결해지고 가독성 향상(JS문법 사용)

• Injection Attack을 방어함으로써 보안성이 올라감
  
  
  

JSX 기본문법

1. JSX에서는 class가 아닌 className을 사용한다.

  import './App.css';

  function App() {
  	return (
    	<div className="App">
      		<div className='nav'>
        		<h1>안녕하세요</h1>
      		</div>
    	</div>
		);
	}

   export default App;

2. JSX에서는 변수를 사용할 때, {}를 사용한다.

 function App() {
 	
 	const Hi = "안녕하세요";
 	return(
 		<div className="App">
         <h1>{Hi}</h1>
 		</div>
 	);
 }
 
 export default App;

3. 항상 div태그로 감싸주어야 한다,

  function App() {
  	return(
  		<div>
          <p>하이</p>
        <div>
    );
   }
   export default App;

이렇게 최상단 태그가 하나 존재해야함.

function App() {
	return(
		<div>
          <p>하이</p>
        </div>
        <div>
          <p>hi</p>
        </div>
   );
export default App;

이렇게 사용할 수 없다.

4. 인라인 스타일링은 camelCase로 작성한다.
-> backgroundColor

5. 주석은 {/.../} 형태로 써야한다.

6. &&,|| 연산자를 이용한 조건부 렌더링을 사용한다.

7. 삼항연산자를 많이 쓴다. -> boolean ?

: null

렌더링 VS 리렌더링

렌더링
컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다. 즉, 가장 처음 렌더링하는 과정이다.

리렌더링
이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한으로 데이터를 업데이트하는 과정이다.

리렌더링 조건

1. state 변경이 있을 경우
2. 새로운 props가 들어올 경우
3. 기존 props가 업데이트될 경우
4. 부모 컴포넌트가 리렌더링될 경우
   - 이때 자식 컴포넌트의 정의는 부모 컴포넌트의 JSX 안에서 사용된 모든 컴포넌트들이다.
   - 하지만, props, children으로 받은 컴포넌트는 자식 컴포넌트가 아니다.
   
   
   

Props와 State

Props 개념과 특징

Props -> 리액트 컴포넌트의 속성

• 읽기 전용으로 부모가 자식에게 전달
• 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트 리턴

  <Comment name={zeroeuni}
           comment={"안녕하세요"}/>

 function Comment(props){
          return <div>{props.comment} 저는 {props.name}입니다.</div>

State 개념과 특징

훅(Hook)이란?
-> 함수형 컴포넌트에서 컴포넌트의 상테(state)와 컴포넌트 생명주기의 원하는 시점에 정해진 함수를 실행되도록 만든 것

훅(Hook)의 종류
-> useState(),useEffect(),useMemo(),useCallback(),useRef()

훅(Hook)의 규칙
1. 훅은 무조건 컴포넌트 내의 최상위 레벨에서만 호출해야 함.
2. 제어문 내에서 호출하면 안됨
3. 컴포넌트 밖의 자바스크립트 함수에서 호출 불가함
4. 컴포넌트 내부요소의 상태변화 감지가 목적

1. useState()

• 함수 컴포넌트에서 변수(State)를 사용하기 위한 훅

 const [변수명, set변수명] = useState(초기값);
 const [count, setCount] = useState(0);
 const [text, setText] = useState("");

useState를 사용한 Count 예제

import { useState } from "react";

const Counter = () => {
    const [value, setValue] = useState(0); //useState사용

    return(
        <div>
            <p>숫자는 <p>{value}</p>이다</p>
            <button onClick={()=>setValue(value+1)}>+1</button>{/* 초기값에서 1을 더하기*/}
            <button onClick={()=>setValue(value-1)}>-1</button>
        </div>
    );
};

export default Counter;

• onClick과 같이 이벤트가 발생시 이벤트를 처리하는 함수를 이벤트핸들러(리스너)라고한다.
  
  
  
  
  

함수를 이용한 컴포넌트 작성법

1. function 이용하기

function 컴포넌트 이름() {}

2. const 이용하기

const 컴포넌트 이름 = () => {}

두 방법 모두 뒤에 export default 컴포넌트 이름;을 붙여줘야 한다.

Map, filter 메소드 사용

Map

쉽게 말해, 똑같이 생긴 UI들을 반복문을 이용하여 줄여주는 방법이다.

• array 자료 갯수만큼 함수안의 코드를 실행해준다.
• 함수의 파라미터는 array안에 있던 자료이다.

const myArray = ["apple","banana","orange"];

myArray.map((item) => {
          return <p>{item}</p>
});

//한줄 요소인 경우 return과 {}는 동시에 생략 가능함.
myArray.map((item)=> <p>{item}</p>);

즉,

const myArray = ["hi","im","zeroeuni"];

myArray.map((item) => {
          return <p>{item}</p>
});

위 코드는

<p>hi</p>
<p>im</p>
<p>zeroeuni</p>

이 코드와 실행결과가 같다.

요소의 개수가 작을 땐 상관이없지만, 100개 200개로 점점 늘어날땐 map을 사용하는 것이 효율적이다.

filter

배열에서 조건에 맞는 값만 출력할 때 사용할 수 있다.

const fruits = ["apple", "banana", "tomato", "grape"];

const filteredItems = fruits.filter((fruit, index) => index >= 2);

console.log(filteredItems); 

위 코드에서는 fruits 배열에서 index가 2 이상인 요소만 출력하도록 filter 과정을 거쳤으므로 "tomato","grape"가 출력된다.

조건부 렌더링

조건에 따라 렌더링의 결과가 달라지도록 하는 것

엘리먼트 변수

• 리액트 엘리먼트를변수처럼 저장해서 사용하는 방법
  let 변수 = <컴포넌트 />

인라인조건

• 조건문을 코드 안에 집어 넣는 것
  
  
  인라인 if
  - if 문을 필요한곳에 직접 집어넣어서 사용하는 방법
  - 논리 연산자 &&을 사용 (AND 연산)
  - 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌 더링
  - 참 && 표현식 -> 표현식
  
  
  인라인 if-Else
  - if-Else문을 필요한 곳에 직접 넣어서 사용하는 방법
  - 삼항 연산자 ? 를 사용
  - 조건? <컴포넌트1 />:<컴포넌트2 /> //조건이 참이면 1, 거짓이면 2가 렌더링 됨
  - 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용
  
  
  컴포넌트 렌더링 막기
  - 리액트에서는 null을 리턴하면 렌더링되지 않음
  - 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨
  - 조건? <컴포넌트> null -> 조건이 거짓이면 컴포넌트 렌더링 안됨
  

Truthy(참같은 값) 과 Falsey(거짓같은 값) 의 개념
JS에서 참 같은 값(Truthy)란 불리언을 기대하는 문맥에서 true로 평가되는 값이다. 따로 거짓 같은 값으로 정의된 값이 아니면 모두 참 같은 값으로 평가.

조건부 렌더링 예제

if Statement

function MissedGoal() { //컴포넌트
  return <h1>MISSED!</h1>; 
}

function MadeGoal() { //컴포넌트

  return <h1>Goal!</h1>;
}

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>; //참이면 <MadeGoal/>컴포넌트 렌더링

  }
  return <MissedGoal/>; //거짓이면 <MissedGoal/>컴포넌트 렌더링

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />); //Goal 컴포넌트 props에 false 전달하여 렌더링

Logical && Operator

function Garage(props) {
  const cars = props.cars;  //['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 && //배열의 개수가 양수이면 <h2> 요소 리턴 		<h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

Ternary Operator(삼항 연산자)

조건 ? 참일때 실행할 요소 : 거짓일때 실행할 요소

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      { isGoal ? <MadeGoal/> : <MissedGoal/> }/isGoal이 참이면  <MadeGoal/>,아니면 <MissedGoal/>렌더링

    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

Input에 useState 적용하기

import { useState } from "react";

const Modal = (props) => {
  return (
    <div>
      입력한 값은 <span style={{ color: "orangered" }}>{props.text}</span>{" "}
      입니다
    </div>
  );
};

export default function InputText() {
  let [text, setText] = useState(""); //useState를 사용하여 input 입력값 저장

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => {
          setText(e.target.value); 
          console.log(e);
        }}
      />
      <button onClick={() => setText("")}>초키화</button>
      <br />
      <Modal text={text} />
    </div>
  );
}

1. useState로 input 입력 값을 저장할 수 있도록함.
2. input의 onChage 속성에 {(e) => setText(e.target.value);} 를 작성하여 input안에서 일어나는 변화를 setText 변수에 저장
   
   
   

-> 이 외에도 useState는 정말 다양한 곳에 사용되니 공부하기.