엘리먼트 vs 컴포넌트 (11/13)

엘리먼트

• React 엘리먼트(React Element) 애플리케이션을 구성하는 블록.
• 컴포넌트(Component)와 혼동되기 쉬움.
• 화면에 보이는것들을 기술함!

const element = <h1>Hello, world</h1>;

컴포넌트

• 페이지에 렌더링할, React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각

함수형 컴포넌트

improt React from 'react';

function Welcome(props) {
return

Hello, {props.name}

export default Welcome;

- 함수형은 당연히 function(){} 형태고 return을 가지는데, return 부분에 엘리먼트를 넣어준다.
- 함수형에서 props는 파라미터로 받아준다
- state를 사용하거나, side Effect을 수행할때 등엔 hook이라는 개념의 함수들을 사용한다

##### side Effect
`side Effect`이란: 일반적으로 '의도하지 않은 결과'를 의미함. 예측 하지 못한 부수적인 효과. 
반드시 해로운 것만 의미하는게 아닌, 예를 들어 코로나 백신을 맞았는데 담날도 몸이 골골대서 하루 휴가를 가는 것. 
(출:https://www.inflearn.com/questions/12660)
코딩에서도 찾아보니 다양한 사례들이 나옴. 


```js 
function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`; //함수 반환 값 생성

  // Bad!
  document.title = `${name}의 개인정보`; //함수 외부와 상호작용하는 Side-effect 코드
  return <div>{message}</div>;
}

위 코드는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시킴으로써 side Effect로 지칭할수 있다. 의도하지 않은 결과로 생각할수 있음. 함수란 모름지기 인풋값 그리고 출력값 나오는 프로세스에 코드가 영향이나 도움을 줘야 하는데 위에 document.title 을 뜬금없이 남의 title을 바꾸고 있음. 그래서 side effect.

외부 API호출해서 데이터 갖고 오는 것도 side Effect으로 봄. 이런건 프로젝트가 커진다면 정확한 작동 시점을 통제 안하고, 또한 이런 코드들을 모아두지 않는다면 개발하기 곤란해지는 일이 빈번히 생김.

따라서 React에선 이러한 side Effect 작업을 분리해서 작업할수 있도록 useEffect()이라는 훅 함수를 제공함, (Effect이라는 말이 "side effects"을 짧게 단축해서 Effect이라 하고, 그걸 사용하니깐 useEffect()이라는 네이밍으로 페북에서 만듦!)

위의 코드를 useEffect()로 분리하면

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  //Side-Effect 코드를 UseEffect로 분리
  useEffect(() => {
    document.title = `${name}의 개인정보`; 
  }, [name]);
  return <div>{message}</div>;
}

(출 : https://points.tistory.com/86)

클래스형 컴포넌트

improt React, {Component} from 'react';

class App extends Component {

render() {
  const test = '클래스컴포'
  return <div>{test}</div>
}

 export default App;

• 지역 state를 가질수 있다. 그래서 this.state로 state 접근이 가능하다.
• 생명주기에 대한 naming을 가진 함수들을 사용 가능하다
  예) componentDidMount() -> (해석해보면) component가 마운트 됐을때 라는뜻이므로 마운트 된 후에 어떠한 작업을 하고 싶은걸 넣으면 된다는 걸 명확하게 알수 있음.
  componentDidUpdate () -> 컴포넌트가 업데이트 되었을때 작업내용을 넣으면 된다는걸 알수있음. functional Component 에서 useEffec(()=>{},[]) 부분에 [ ]여기에 종속되는 변수를 넣으면 componentDidUpdate처럼 사용이 가능함