드디어 쓰네요...
클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해서 쓰겠습니다.
결론부터 말씀드리겠습니다. 함수형 컴포넌트가 더 좋습니다. (간결성, 속도,Class component의 lifecylce methods를 거의 전부 다 사용 가능)
저 class 열심히 해보려고 했는데, 오늘부터 손절 합니다. 제길슨...
혼자 차이점들을 조사하면서, 아 지금까지 클래스형 배웠는데 .. 제발 클래스형의 독특한 장점 있어라!! 했지만.. 쩝... 여기까지
1. Class Component
특징 :
1.Constructor가 있다. 여기서 state를 선언할 수 있다.
2. render() 함수가 필요하다. extends
3. Component를 해야한다.
장점 : lifecycle method를 통해서 좀 더 정교한 작업이 가능하다. (오!! 좋군요)
2018년까지는 이런 차이가 있었습니다.
2. Functional Component
특징:
1. 간결하다. constructor 필요없다, render() 필요없다.
2. props로 값을 넘겨받아서 props.xx로 값도 받을 수 있다.
(옛날 특징)
3. lifecycle method가 없어서 class형처럼 정교하지 못하다 (2018년에 hook나오기 전)
즉!! 2018년 이전에는 class의 특징인 state를 사용하지 않아도 된다면 functional로 바꿔서 했었다..
하지만!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
이제는 모두다 functional에서 가능하다.
그럼 class형 왜 쓰냐?
안써도 된다. (정말 특이케이스 제외 아래 예시 포함)
그리고 이제 Functional Component는 속도도 더 빨라질것이다.
보시면, getSanpshotBeforeUpdate는 scroll을 할 때 이전의 장면을 저장할때? 사용한다고 합니다.
그 외에 대부분 메이저한 기능들은 모두 사용할 수 있습니다.
Functional component의 장점
1. class comp 보다 코드가 간결하다
2. class comp보다 속도가 빠르다(빨라질 계획)
속도도 빠르고 코드도 간결한데 앞으로 개발에 class를 쓴다는건
도태되어야 합니다. 이런 정보화 시대에 빨리빨리 앞서 나갑시다.
Facebook은 class component 쓰나요?
정답 :
지금은 functional로 개발하고 있지만, 이전에 만든 class형을 굳이 고치지는 않는다고 합니다.
또한 class형의 지원은 계속 할것이라고 공식 대답이 있었답니다.
https://ko.reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy
Hook의 개요 – React
A JavaScript library for building user interfaces
ko.reactjs.org
Functional component 사용방법
이것도 하나의 user-defined component 이므로
앞글자를 반드시 대문자로 해주셔야 합니다.
예전에 했던건 그냥 뭐 맘대로 camel부터 snake 같이 아무렇게 막 지었는데.. 인생 그렇게 살면 안됩니다
1번 방법.
export const Menu = (props) =>{
return(
<div> View!!</div>
);
}
2번 방법
export function Menu(props){
return(
<div> view!!</div>
)
}
어떤 방식을 사용하실건가요?
선택은 자유이지만, 문명인이라면 arrow function을.. 여기까지...
아참.. 그리고
export const DishDetail = (props) =>{
const comment = <Menu zz={props.dish} />;
return (
<div className="row">
{selected}
{comment}
</div>
);
}
const comment = Menu(props.dish); 로 하면 안됩니다.
왜 안될까요? js는 함수 호출 방법도 모르는걸까요?
아닙니다.
return value가 react element면 Component 호출 방식으로 불러야 합니다.
만약 Menu 함수가
const Menu = () => { return 3;} 이었다면
const comment = Menu(); 로 호출해도 된답니다.
즉 return값이 react element냐 value냐에 따라서 호출 방법이 갈린답니다.
Destructuring Assigment (구조분해 할당)
구조분해 과제 아닙니다;; docs보고 무슨 과제인가 했습니다
const Comment = ( { dish } ) => { if(dish!=null)~~~ }
export const Main = (props) => { <Comment dish = {props.dishes} } }
위의 예제에서 Comment 컴포넌트는 왜 (dish)가 아닌 {dish}로 받을까요?
이게 바로 구조분해 할당입니다.
만약 저렇게 하지 않고 props를 통째로 넘겨버리면 props.dishes.name 이런식으로 접근해야 합니다.
하지만 구조분해 할당을 이용하면 dishes 객체에서 변수들을 분해해서 dishes.name 이런식으로 깔끔하게 접근이 가능해집니다.
사용법 :
{}를 사용한것 자체가 js 컴파일러가 구조분해할당으로 인식을 하게 됩니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
구조 분해 할당 - JavaScript | MDN
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
developer.mozilla.org
결론 ----
유지보수를 위해 Class형이 어떻게 굴러가는지 아는것도 중요하지만,
앞으로 Functional component가 더 좋아보인다.
그런 의미에서 이번 강의는 클래스형으로 진행이라 어쩌면 좋을지도..
