오늘은 함수형 컴포넌트가 아닌, 클래스형 컴포넌트에 대해 배웠다.
클래스?
물건을 만드는 설명서 라고 이해하면 되겠다.
class 클래스 이름 {
만드는 방법..
}
==> new 클래스 이름() 이렇게 실행.
만드는 방법 부분에 input이나, 실행할 함수 등을 넣어 new 클래스 이름()으로 컴포넌트를 생성한다.
new Date()의 경우를 살펴보았다.
class Date {
.
.
.
}
이것으로 new Date()를 생성하는데
const date = new Date() 로 변수 date에 담아주고,
date.getFullYear()
date.getMonth()
date.getDate()
로 불러올 수 있는데 이때 앞의 date 부분은 뒤에 .~ 로 쓰기에 객체라고 볼 수 있고, .getFullYear() 부분은 위에서 선언한 class컴포넌트에 들어있어 사용가능한 함수이며, 여기선 메소드 라는 이름으로 불린다.
그리고 new Date()는 내장객체이다.
위의 것들을 불러올 수 있던 이유는 저 설명서(클래스 컴포넌트)에 들어있었기때문이다.
그러면 함수를 따로따로 적어주면되지 왜 궂이 클래스로 묶었는가?
물론 클래스로 묶지 않고 따로따로 적는 방법도 가능하나, 유지보수 좋게 하나로 묶기위함(그룹핑)을 그 이유로 들 수 있다.
주로 벡엔드에서 API를 그룹핑할때 사용한다고 한다.
이러한 프로그래밍을 객체 지향 프로그래밍 이라고 불리고 줄여서는 OPP라고 (Object Oriented Programing)이라고 한다.
함수형 컴포넌트에서는 화면에 그려줄 때 exfault default 라고 function앞에 붙이기만 한다. 그러면 클래스형 컴포넌트에서는?
reder(){ } 라는 함수를 사용한다.
등 을 적어주면된다.
render안에 retrun 과 함께 실행할
reder() ==> 리엑트에서 제공하는 함수로 리엑트에서 render를 찾아 그 안의 것을 화면에 나오게 제공한다.
따라서 import를 사용하는데 그럼 무엇을 import 해야하나?
그러기 위해서는 먼저 클래스 컴포넌트를 완전히 쓰고 넘어가자.
export default class 클래스명 extends Component {
.
.
}
여기서 extends는 뒤의것을 상속받는다는 얘기다. 그럼 Component에서 상속받는다는 얘기.
Component에는 render를 비롯, 여러 함수들, state도 존재한다. 따라서 impor는 이 Component를 해주면된다.
class 컴포넌트 내에서는 const 등을 사용할 수 없다.
그러면 state등은 어떻게 사용하나?
state 를 그냥 적어주면된다.
state = {} 하고 중괄호 안에 사용할 state를 넣어준다.
이때 주의해야할 점은 state라는 이름은 바꾸면안된다. Component에서 가져온것이기에 이름을 바꾸게 되면 읽어오지 못한다.
state이름은 중괄호에 넣어주도록하자.
원래는
const [count,setCount] = useState(0)
이라고 적었던것을
state = { count:0 } 이렇게 객체 형태로 적어주는 것이다.
클래스 안에는 각각의 변수, 함수 앞에 this가 생략되어있는 형태이다. 즉, 눈에만 안보일뿐이라는 말이다. 따라서 만약 onClickSubmit(){ }이라는 함수를 실행시키고자 한다면 this.onClickSubmit이라고 적어준다.
이때 this는 실행 주체에따라 동적으로 달라지기에 주의가 필요하다.
동적으로 달라지는 것을 막기위한 방법으로는 두가지가 있다.
먼저 첫번째. 화살표 함수로 만드는 방법.
화살표 함수로 바꾸게되면 this는 바로 그 화살표 함수를 가리키게 되므로 문제되지 않는다.
다만, this가 동적으로 바뀌기를 원한다면 화살표 함수 방식보다는 두번째 방법을 사용하는것이 좋다.
두번째방법. .bind(this)사용.
선언된 곳에서도 사용 할 수 있게 연결시켜준다는 의미이다.
this.onClickSubmit.bind(this)이런식으로 써주면된다.
class함수 라이프사이클.
말그대로 생성되고, 바뀌고 , 삭제되는 것을 말한다.
즉, 생성될때, 바뀔때, 삭제될때 실행되는 함수를 만들 수 있다는 것이다.
이것또한 Component에서 제공한다.
화면이 그려진후 실행할것:
componentDidMount() {
}
수정시 (리랜더시 실행할것)
:
componentDidUpdate(){
}
컴포넌트가 사라지기전에 실행할 것:
componentWillUnmount(){
}
위의 함수는 state, render등과 마찬가지로 Component에서 제공되는 함수기에 절대 이름을 바꾸면안된다.
클래스에서는 hooks 사용이 안된다.따라서 만약 router를 사용해 페이지를 이동하려면
Router를 import 해야한다.
그리고 Router.push("/"); 이런식으로 작성한다.
함수형으로 바꿔보기
이렇게보니 use로 시작되는 애들(hooks)가 Component에서 제공되는 것과 유사하다.
state부분과 router부분은 원래 사용하던 방식으로 고치면되는데 그러면 라이프 사이클부분도 바꿔야하는데 Component에서 가져온 것인데 다시 받아와야하나?
이럴경우에는 hooks를 이용한다. useEffect를 이용해 작성할 수 있다.
useEffect(() => {
console.log("그려지고 나서 실행");
}, []);
다른 점이 있다.처음 그려지는것도 변경되는 것으로 보기에 처음 그려질때, 그리고 다시 리랜더될때도 같은것이 실행된다.
useEffect()소괄호 안에는 화살표 함수를 넣고 뒤에는 배열을 넣는데 이 부분을 의존성 배열(dependency array)라고 한다. 의존성 배열 부분에는 조건이 들어가는데, 만약 배열에 count를 넣으면 count가 될때마다 (물론 처음그려질대는 무조건실행되고,)실행된다. 배열이 없다면 무언가 바뀔때마다 실행된다.
그럼 배열이 있는데 비어있는 경우는 어떻게될까?
바로 위의 경우에 말이다.
저 경우에는 처음에 실행되고 그 다음 조건없기에 따라서 실행안된다.(의존성배열 없음)
오픈 API사용으로 사진받아오기.
구글창에 public api검색 -->깃허브 사이트 --> 아래 내리면 일단 사용할 것은 Auth:No, Https:상관없음,CORS:Yes로 사용.
Auth:No ==> 로그인이나 회원가입없이도 사용가능
https ==> Yes일경우 보안 안정됨.
CORS:Yes ==> 크로스 오리진 리스펀스 쉐어링 == 우리가 요청해서 받아갈 수 있음.
메인페이지 오픈 api적용을 해보려다가 마음에 드는 이미지가 없어 캐러샐두개로 메인페이지에 적용해보았다.
고양이 사진을 적용하고싶었는데 안되서 멘토님께 문의 드렸다가 이것도 네트워크 오류이니 네트워크 탭을 찾아보고 CORS가 yes로 되어있었지만 에러로 뜬게 확인되어 아마 벡엔드에서 막아놨는데 깃허브 업데이트를 안해놓은것 같다는 얘기를 들었다. 앞으로 네트워크탭도 침착하게 확인해갈것...
그리고 저번에 ant design에서 아이콘 적용한것의 크기가 적용이 안되어 멘토님께 질문드렸다.
상속되는 것보다 우선순위로 작성하기위해 그 코드의 클래스를 찾아보니 전역이 적용되어있어 *{}하고 중괄호 안에 font-size를 다시 적용해주었더니 해결되었다. css-in-js방식사용으로 임의로 우선순위를 조작하는 클래스에 직접조작해 사용하는 방식이다.
같은방식으로 캐러셀에도 어디에서 내려왔는지 모를 width값이 있어 지워주려고 클래스 명을 받아썼는데, 그부분은 일단 라이브러리의 것이기에 클래스명은 임의로 게속 재생성되어 실패 하였고, 내가 하려던 캐러셀이 멀티..무슨 방식이었고 가운데에 이미지가 오면 그 이미지가 강조되어 더크게보이는 그런건데 검색해보니 따로 스타일을 주어야한다고 했다. 그렇지만 .. 일단적용은 해봤으나 뭐가뭔지... 나중에 찬찬히 봐봐야겠다. 일단 자동회전으로만...
침착하게, 차분히.
