[KUIT] 5주차 워크북 보충(React)

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

 

1. 클래스형 컴포넌트가 함수형 컴포넌트로 대체된 이유

class ProfilePage extends React.Component {
	showMessage = () => {
		alert(`${this.props.user} 를 팔로우 했습니다`);
	}

	handleClick = () => {
		// const {user} = this.props; 이렇게 미리 할당해둬서 해결은 가능
    // setTimeout(() => this.showMessage(user), 3000);
		setTimeout(this.showMessage, 5000); // this.showMessage 대신 user 넣으면 해결 가능
	}

	render() {
		return <button onClick={this.handleClick}>Follow</button>;
	}
}

A 유저를 팔로우 한 후 빛의 속도로 3초만에 B 유저 프로필로 이동하면, "B를 팔로우했습니다" 라는 alert 메세지가 나타남

→ A 유저를 팔로우 했는데도 불구하고!

→ this가 변경가능(mutable)하기 때문에 생긴 문제

 

function ProfilePage(props) {
	showMessage = () => {
		alert(`${props.user}를 팔로우 했습니다`);
	}

	handleClick = () => {
		setTimeout(showMessage, 5000);
	}
	return (
		<button onClick={handleClick}>Follow</button>
	)
}

 

함수형 컴포넌트로 바꾸면 페이지를 B로 이동해도 팔로우를 눌렀을 시점의 유저 이름이 정상적으로 출력

→props는 변경 불가능(immutable)하기 때문!

→ immutable한 props를 받기 때문에 결국엔 랜더링 결과가 보장된다는 것이 큰 장점

 

출처: https://velog.io/@shinyejin0212/React-클래스형-컴포넌트에서-함수형-컴포넌트로-바뀐-이유

---

2. jQuery는 왜 몰락했는가?

javascript의 브라우저 호환성이 충분히 좋아졌고

javascript의 지속적인 업데이트로 안정성이 높아지고 기능이 추가되면서 jQuery를 사용할 이유가 없어졌다.

->복잡한 SPA를 만들 땐 React를 사용하자.

 

출처: https://velog.io/@gth1123/jQuery-vs-React

 

(※※※※ 주의 ※※※※)

위의 출처에서도 그렇고 제가 스터디에서 말한 것도 그렇고 React가 Virtual DOM(가상 돔)을 활용하기 때문에 DOM을 활용하는 jQuery보다 성능이 좋다고 했습니다.

그리고 그게 맞는 건 줄 알았습니다. 오늘 이 영상을 보기 전까진…

 

https://www.youtube.com/watch?v=kgnv6ZOa81w

 

위 영상(1분 30초부터 참조)에 따르면

DOM을 사용하는 것이 가상 DOM보다 오히려 더 빠르게 작동한다고 합니다.

 

아주 특수한 경우가 아니만 DOM이 빠르냐 가상DOM이 빠르냐를 비교하는 것은 무의미하다고 합니다…

→ 따라서 면접에서 리액트를 선택한 이유로 가상 DOM을 뽑는다면 그것은 설득력있는 답변이 아닙니다!!

 

---

3. React, Vue, Angular

• 기존 앱에서 보수 및 확장이 필요하거나 빠르게 크로스플랫폼 앱개발까지 필요할 때 - React
• 가벼운 서비스를 개발할 때, 개발에 관해 잘 모르는 상태에서 빠르게 성과를 내야할 때 - Vue
• 규모가 큰 기업에서, 많은 기능을 구현해야 하고 확장성이 높은 어플리케이션을 개발할 때 - Angular

 

출처: https://yeongjaekong.tistory.com/12

출처: https://strap.tistory.com/entry/프레임워크-React-Vue-Angular-차이점

---

4. key 값에 index를 넣으면 안되는 이유

key 값에 index를 넣는 것은 권장되지 않는다.

→ 출처의 예시 처럼, mapping이 잘못될 가능성이 크다!

 

 

index를 key로 써도 되는 경우

1. 배열과 각 요소가 static이며 computed되지 않고 변하지 않아야 한다.
2. 데이터 내부에 id로 쓸만한 unique 값이 없을 경우
3. 데이터가 결코 reordered or filtered 되지 않을 경우

출처: https://medium.com/sjk5766/react-배열의-index를-key로-쓰면-안되는-이유-3ce48b3a18fb

---

5. 그러면 key 값에 무엇을 넣으면 될까? - uuid

key 값에 무엇을 넣으면 좋을까요?

 

Date.now()

→동시다발적으로 여러개의 컴포넌트를 한번에 return하게 되면 key값이 중복되는 상황이 발생할 수도 있음

 

Math.random()

→ 암호학적으로 안전한 random number를 생성하지 않기 때문에 보안과 관련된 로직에서는 Math.random()을 사용하지 않는 것이 좋음

 

 

UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다.

→ react-uuid 라이브러리를 사용하자

 

 

출처: https://junvelee.tistory.com/30

출처: https://velog.io/@jiheon788/React에서-Key의-역할-UUID의-사용

---

6. React.Fragment

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환

→ JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 함

→ <Fragment></Fragment>로 감싸자!(import 필요)

→ <></>로 감싸도 됨(이걸 더 많이씀. 추천)

 

출처: https://velog.io/@lilyoh/React-Fragments-사용이유-및-사용법

---

7. camelCase, PascalCase, snake_case

camelCase: 첫 글자는 소문자, 중간 글자들은 대문자로 시작

PascalCase: 첫 글자와 중간 글자들이 모두 대문자

snake_case: 언더바로 구분

 

출처: https://velog.io/@leyuri/표기법-스네이크-케이스-파스칼-케이스-카멜-케이스