포트폴리오 리뷰
댓글 수정하기
- isEdit
- defaultvalue
-> el={props.el}
- defaultvalue 주기
- props.setIsEdit?.(false) : 수정하고 수정 화면 사라지게 하기
-> props.setIsEdit이 있으면(?.) false로 해줘
-> BoardCommentList.presenterItem에서 props로 전달받음 (state 끌어올리기)
spread 연산자를 활용한 state 코드 리팩토링
spread연산자를 활용해서 useState와 onChange함수를 사용한 코드를 리팩토링 할 수 있다.
state 객체를 만들어 state들을 그 안에 담아준다.
객체에는 key값이 중복되지 못한다. 중복된 key값 중에 위에 있는 값은 사라진다.
spread 연산자를 사용해서 위에 함수하나로 줄일 수 있다.
이때, id 값을 주어 구분할 수 있도록 해준다.
event.target.id은 변수인데, key값으로 적용되어 문자열이 되어버린다 ("event.target.id"가 되어버림)
key에는 . 과 같은 기호가 들어갈 수 없다.
event.target.id에 들어있는 값이 key값으로 되어야한다.
이를 해결하기 위해 대괄호 [] 로 감싸준다. [event.target.id]
이때, 괄호는 배열이 아니다.
하나의 함수로 통일해서 리팩토링 해준다.
props로 onChangeInputs를 전달해준다.
prev를 사용하면 inputs를 props로 전달할 필요 없이 onChangeInputs만 props로 전달할 수 있다.
variables도 spread연산자를 활용해서 줄일 수 있다.
초기값도 따로 분리해서 useState안에 사용해준다.
Class-Component
Class는 객체이자 물건을 만드는 설명서 역할을 한다.
class는 설명서, new는 설명서 대로 만들어 낸다.
class에는 기능, 변수 등 설정이 가능하다.
new Date() 역시 class를 사용해서 만들어진 것이다.
.이 붙은 것은 함수이기도 하지만 메소드라고도 불린다.
메소드에는 function, const, let을 붙여서 사용하지 않는다.
date 인스턴스 안에 함수들을 그룹화되어 있어 사용하기 편리하다.
(유지보수가 용이하고 효율적이다.)
이렇게 객체를 사용하여 그룹화해서 관리하는 것을 객체 지향 프로그래밍 (OOP) 이라 부른다.
컴포넌트 만들기
extends Component로 Component의 기능을 가져온다.
Class에서 state를 사용하려면 반드시 변수명을 state로 해야한다.
또한 useState가 필요 없다. (Component의 기능을 상속받았기 때문)
class에는 return이 없다.
-> Component의 화면에 그림을 그려주는 기능 render() 사용
-> render() 에 return으로 html을 작성해준다.
Component에서 제공하는 this.setState를 사용하여 count + 1 을 해줄 수 있다.
this
class에서 변수나 함수를 사용하고 싶으면 this를 붙여준다.
this는 실행 주체에 따라 동적으로 변한다.
버튼을 클릭해도 count가 undefined인 이유는 버튼을 클릭했을때 this가 버튼이 되어버리기 때문이다.
this를 강제하고 싶은 경우,
bind를 사용한다.
this.onClickCountUp.bind(this) -> count가 this가 된다.- 또는 클릭이 적용되는 함수를 화살표 함수로 작성해준다.
컴포넌트 라이프 사이클 (생명주기)
class를 함수형 컴포넌트로 변환하기
클래스 라이프 사이클을 useEffect()로 한번에 작성할 수 있다.
useEffect에 들어가는 배열을 의존성 배열 (dependency array) 이라 부른다.
의존성 배열에 변경되는 값을 넣어주면 변경 후에 리렌더링이 된다.
(의존성 배열에 값을 넣어주지 않으면 무엇이 변경되든 리렌더링이 된다.)
useEffect는 바로 실행되는 것이 아니라 렌더링이 한 번 된 후 실행되기 때문에 코드 위치는 상관없다.
useEffect 사용
rest-API를 요청할때 useEffect를 자주 사용한다.
useEffect를 사용하면 rest-API를 요청할 때 graphql의 useQuery처럼 사용이 가능하다.
그러나, 전체가 렌더링 되고 나서 useEffect가 실행되기 때문에 useQuery보다 느리다.
-> react-query 라이브러리를 사용하면 rest-API도 useQuery처럼 사용 가능하다.
open API 모아놓은 사이트
https://github.com/public-apis/public-apis
-> open API를 사용하여 백앤드 개발자가 없어도 사이트를 만들 수 있다.
