React
오늘은 리액트에 대해 조금 알아보자. 조금만 알아볼 것이다. Hook을 배우기 전. 사실 잘 몰라서 개소리를 많이 쓰거나 잘못된 정보, 혹은 나만 이해하는 말들로 작성될 수 있다.
니가 뭘 알아?
왜냐? 리액트는 공식문서나 다른 블로그에서 정말 정리를 잘 해두었다.
그래서 리액트에 대한 블로깅을 어떻게 해야 하나 고민이 많았다..
그래서 나는, 코드스테이츠에서 준 질문들에 답을 하는 것을 기준으로 정리할 예정이다.
오키??
질문에 대한 답은 리액트 공식문서를 참고하여 만들었다.
1. JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요? 또한 JSX를 사용하지 않고 React를 사용할 수도 있나요??
우선 JSX란 무엇이냐!
JSX는 html에서 작성하는 표현법들을 javascript에서도 사용할 수 있도록 만든 문법이다.
1
2
3
4
5
6
7
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
요렇게 element에 html 태그를 할당할 수도 있다.
또한 선언한 name을 중괄호 안에 넣어 사용할 수도 있다.
저런식으로 함수도 넣을 수 있음!!
JSX에는 몇 가지 특징들이 있다.
- JSX를 사용하기 위해서는
import React from ‘react’; // import CustomButton from ‘./CustomButton’;
이렇게 import가 있어야 한다. - 컴포넌트는 반드시 대문자로 시작해야 한다. function hello가 아닌 function Hello. 이런 식으로!
그 외에도 정말 많지만 자세한 설명은 생략한다..
JSX사용은 필수가 아니다. 하지만 코드를 작성하고 읽을 때 더 도움이 된다고 하니 쓰도록 하자!
2. import / export 구문은 어떤 식으로 사용할 수 있나요?
import는 다른 파일에서 가져오는 것이고, export는 다른 파일로 내보내기 위한 것이다.
1
2
3
4
5
6
7
8
9
10
11
import // 수입!
import React from "react";
// 리액트를 쓰기 위해 꼭 필요한 import.
import Nav from "./Nav";
//Nav.js에서 Nav라는 컴포넌트를 가져온다는 것.
export // 수출!
export default App;
// 이러면 다른 파일에서 import App을 통해 이용할 수 있다.
export default function CurrentMovie() {}
// 요렇게 함수를 선언할 때 앞에다 써줘도 된다.
3. DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요?
컴포넌트가 뭐고..??
내가 이해하기론 javascript로 비유했을 때, 한 가지 기능을 하는 함수라고 생각하면 될 것 같다.
React는 컴포넌트 단위로 개발을 해야 한다.
예를 들어, 비디오 목록, 현재 재생되는 비디오, 검색 기능 등을 구현하고 싶다면
본인이 생각했을 때 기능들을 작게 나누어 한 가지 기능만 하는 함수들로 구별하여 만드는 것이다.
고런 아이들이 컴포넌트고, 보통 js파일을 아이에 따로 만들어서 관리해준다. 요런 컴포넌트를 import/export를 이용해 사용하면 된다.
컴포넌트 단위 개발의 장점
유지 보수와 관리하기가 쉽다. 또한, 문제와 기능들을 작게 쪼개고 생각할 수 있어서 만들 때 체계적이게 만들기 편하다.
그 외에도 여러 장점이 있겠지만.. 자세한 설명은 생략한다.
4. props와 state의 차이점은 무엇인가요?
React에서 class로 만든 컴포넌트는 state라는 것을 갖고 있다.
우선 어떻게 쓰느냐?
1
2
3
4
5
6
7
8
9
//App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name : '',
age : ''
};
}
위와 같이 만들 수 있다.
우선 state를 만들려면 constructor와 super를 꼭 적어야 한다. 왜냐고? 그건 묻지마!!! 그냥 외워!!
현재 위 state에 있는 값을 불러올 때는 this.state.name 이렇게 쓰면 된다.
지금은 아무 값도 지정해 주지 않았다.
저기에 값을 넣고 싶으면 꼭 setState라는 것을 써야한다.
1
2
3
4
5
changeName() {
this.setState((state, props) => ({
name: "sangKwon"
}));
}
위 changeName()을 실행시키면 App에 있는 this.state.name의 값이 sangKwon으로 변하게 된다. 참 쉽죠??
위에 App에 있는 state는 props를 통해 다른 js파일로 보낼 수 있따.
예시 App.js 와 ChangeName.js는 서로 import와 export로 이어져 있다고 가정하자.
그리고 App.js에서 ChangeName을 태그를 통해 리턴할 수 있고, 그 태그에 {}를 통해 this.state.name의 값을 전달할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name : SangKwon,
age : ''
};
}
render() {
return (
<ChangeName name={this.state.name}/>
)
}
//ChangName.js
export default function ChangeName(props) {
console.log(props.name) // 'SangKwon'
return (
<div>
{props.name} //'SangKwon'
</div>
);
}
이렇게 State값을 넘길 수 있고, props의 인자로 받을 수 있다.
꼭 ChangeName.js에서 props일 필요는 없다. 인자에 name을 받으면 name.name이 되는 것.
쉽게 이해는 방법 !! App.js 와 ChangeName.js 이라는 두 나라가 있다. 한국과 미국이라고 생각하자.
한국(App.js)에 있는 this.state.name씨는 은 미국(ChangeName.js)으로 갈 때 이름을 바꿀 수 있다.
한국 이름, 미국 이름이 따로 있듯이
그것을 여기서 정할 수 있다.
1
2
return <ChangeName name={this.state.name} />;
// 여기서 {}앞에있는 name이 미국(ChangeName)에서 쓸 이름이다.
name으로 이름을 바꿨으니 ChangeName.js에서 this.state.name씨는 앞으로 props.name으로 사는 것이다.(props로 받았으니!) 만약 내가
1
return <ChangeName sagnKwon={this.state.name} />;
으로 한다면? 미국(ChangeName.js)에서는 props.sangKwon으로 값을 찾을 수 있다.
오키??
5. props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요?
그 규칙은~~~~ 바로 순수함수처럼 다뤄줘야 한다고 하네
props는 읽기 전용이다. 그래서 수정을 하면 안 된다고 한다.
여기서 순수함수란?
입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 것