[React] Component

📌 리액트란 ?

• meta(facebook)이 개발한 오픈소스 JavaScript라이브러리이고, 대규모 웹서비스의 UI를 더 편하게 개발하기 위해서 만들어진 기술이다
• React 로 만들어진 서비스로는 instagram facebook notion 등이 있다

📌 리액트 특징

1. component 의 기반으로 UI를 표현한다
2. 화면 업데이트 구현이 쉽다
3. 화면 업데이트가 빠르게 처리된다
   

   위 사진에서 HTML과 CSS가 객체모델로 변환이 되면서 두개를 합친 것을 Render Tree 라고 하는데 웹페이지의 청사진 또는 설계도라고 불린다 다음으로는 Layout작업인데 웹페이지라는 공간 안에 Render Tree에 포함되어 있는 요소들의 배치를 잡아 보는 작업이다 마지막으로 Painting 작업에서는 실제로 화면에 그려내는 과정을 말한다

   • DOM이 수정되면 브라우저는 Render Tree를 다시 생성하고, Layout을 다시 잡고 Painting 을 다시 진행한다. DOM을 수정하게 되서 다시 작업하는 걸 Reflow(레이아웃을 다시한다), Repaint(페인팅을 다시한다) 라고도 불린다 이 작업은 매우 오래 걸린다고 볼 수 있다

📌 component란 ?

• 구성요소이다 즉 화면을 구성하는 요소, UI를 구성하는 요소를 말한다

📌 component 특징

• component 작명을 할 때 첫글자는 무조건 대문자로 적어주어야 한다 소문자로 적게 되면 React가 DOM으로 인식하기 때문에 오류난다
• Class component 와 Function component 방법이 있다
• Class component 방법은 코드가 길어지기 때문에 보통은 Function component를 많이 사용한다

• component를 사용하면 좋은 점

1. 가독성이 좋아진다
2. 재사용성이 높아진다
3. 유지보수가 편리해진다

📌 component 작성방법

• component retern바로 아래에는 감싸는 태그가 꼭 있어야 하고, 1개여야 한다

< Class component >

class Header extends Component {
  render() {
    return (
      <header>
        <h1>header</h1>
      </header>
    );
  }
}

< Function component >

function Footer() {
  return (
    <footer> 
      <h1>footer</h1>
    </footer>
  );
};

//화살표 함수로도 사용이 가능함
const Footer = () => {
  return (
    <footer>
      <h1>footer</h1>
    </footer>
  );
};

---

📌 선언형 프로그래밍과 명령형 프로그래밍

<선언형 프로그래밍이란 ?>

• 과정은 생략하고 목적만 간결히 명시하는 방법이다

<명령형 프로그래밍이란 ?>

• 목적을 이루기위한 모든 일련의 과정을 설명하는 방식이다

요약하자면 React는 목적만 깔끔하게 명시하고, 명시 코드가 간결한 선언형 프로그래밍을 사용한다
반면에 JavaScript는 모든 과정을 하나하나 다 설명하기 때문에 코드가 길고 복잡하다

📌 화면 업데이트 구현방법

• React는 component 단위로 나눠서 개발하게 되는데, 이때 각각의 component에는 현재 component의 상태를 저장 할 수 있는 state라는 특수한 변수가 있다

  • state의 값이 바뀌게 되면 바뀐 값에 따라서 각각 다른 UI화면에 렌더링 하게 해줄 수 있다. 렌더링이란 웹페이지 화면에 UI요소를 그려내는 걸 말한다

---

React 요약

• 업데이트를 위한 복잡한 동작을 직접 정의 할 필요없이 특정 변수의 값을 바꾸는 것만으로 화면을 업데이트 시킬 수 있다