React 두번 째 시작

## 2021/01/07

생활코딩으로 리액트를 접한 이후 뭔가 얕게 배웠다는 느낌이 들어서 그 이후에 'Groom'강의를 들어보았다!

1. React의 동작 원리는 무엇일까?

→ applicaton의 html소스 파일을 열어보면 해당 페이지의 내용을 찾아볼 수 없었다.

그 이유는 react가 id가 root인 div 태그 안에 페이지의 소스를 넣어버리기 때문이라고 말할 수 있다. 그렇기 때문에 우리에게는 보이지 않고 소스코드에는 존재하지 않는 것처럼 보이지만 react가 만들어내는 것이라고 할 수 있다. root라는 아이디는 index.js의 getElementById에 해당하는 아이디로 이 두 아이디는 같아야 한다.

2. JSX

→ JSX란 쉽게 이해하면 javascript + xml/html 이라고 할 수 있다.

javascript 코드를 쓸 때는 꼭 {}중괄호 사이에 써야 한다.

React에서 jsx가 꼭 필수는 아니다!! 하지만 쓰는 게 더 편리하다!!

<장점>

• 코드가 간결하다.
• 가독성 향상.
• 버그를 발견하기 쉽다.
• Injection Attacks 방어.

JSX를 사용한 코드

<div>Hello, {name}</div>

*JSX를 사용하지 않은 코드

React.createElement('div', nullm 'Hello, $(name)');

위의 두 코드는 같은 코드이지만 JSX를 쓴 코드가 더 간결하고 가독성이 높은 것을 알 수 있다.

또한 JSX는 객체를 나타낸다. React는 이 객체를 읽어 DOM을 만드는 데에 사용한다. 객체의 요소가 되는 children은 ()소괄호로 꼭 묶어줘야 한다.

Example

const element=(
  <div>
		<h1>Hello!</h1>
		<h2>Good to see you</h2>
  </div>
);

추가로 함수에도 JSX의 성질을 이용할 수 있다.

const formatName = function(name){
  return name.firstName + " " + name.lastName;
}
const name = {
  firstName: "Soyeon",
  lastName: "Park"
};
const element = <h1>Hello, {formatName(name)}!</h1>

ReactDOM.render(
  element,
  document.getElementById('root')
);

3. map

→ map은 array의 각 item에서 함수를 실행하는 array를 가지는 javaScript 함수이며 그 함수의 result를 갖는 array를 넘겨준다.

함수를 취해 배열의 각 item에 함수를 적용하는 것이다.

Example

friends=["dal", "mark", "lynn", "John"]

friends.map(function(current)=>{
	console.log(current);
	return 0;
})

<출력 결과>

dal
mark
lynn
John
[0, 0, 0, 0] //리턴 값이 0이기 때문에.

4. prop-types

→ 알맞은 props가 쓰였는지 확인할 수 있다. string, number, object등 많은 타입을 넣을 수 있다. isRequired가 붙지 않으면 그 타입이 필수는 아니라는 것이다. 단, 이름은 꼭 PropTypes라고 지어야 한다. 그렇지 않으면 react가 확인을 할 수 없다.

Example

import PropTypes from "prop-types"

Food.PropTypes={
		name: PropTypes.string.isRequired,
		picture: PropTypes.string,
		rating: PropTypes.number
};