component 간단정리

component는 <div><div>..... 이렇게 되어있는걸 하나의 함수로 설정하고 싶을 때 쓰면 됨

 

예를 들어 어떤 경고메세지같은걸 출력하고 싶을 때

이렇게 div h4 p 이런 태그들을 Modal이라는 함수로 설정해줄수가 있음

주의할 점은 이런 함수들은 App함수 밖에 선언해야됨

이렇게 함수 지정해놓고 저 경고메세지를 화면에 넣고싶으면

<Modal><Modal/> 하면 됨 (<Modal/> 해도 똑같음)

 

언제쓰면 좋냐?

1. 반복적인 html 축약할 때 -

만약에 게시판같은걸 만든다면 게시판 글들은 어차피 다 똑같은 태그로 만들어놓을거니깐 이럴때 설정해두면 편함

2. 큰 페이지 하나를 컴포넌트로 만들어놓으면 만약에 네이버 메인에서 네이버 뉴스 클릭해서 화면 전환할때 줄줄이 길게 안해놔도 컴포넌트 한개만 쓰면돼서 편함

3. 자주 변경되는 것들

*대신 useState 못씀 - useState는 App함수 안에서 만든 함수니깐

 

원래 js에서는 버튼 클릭하면 class에 뭘 추가해서 추가되면 css에서 display속성을 none에서 뭐로 바꾸고 이렇게 해줘야됐는데

리액트+State를 쓰면

 

 

이런식으로 클릭하면 modal 값을 반대로 바꿔줘서 편하게 할 수 있음

*사실 저것보다도 !modal이 좀 획기적인거라서 그냥 자바스크립트에서도 사용할 수 있을듯?