0. 목차
1. 개요
2. React 세팅
3. Component
4. Props
1. 개요
드디어 리액트다.
개발 공부를 시작하기 전에도 이미
몇번 들어본적 있고,
프론트 쪽에서 가장 핫한 기술 중 하나이다보니,
걱정도 되고, 설레기도 한다.
천천히 해보려고 한다.
우선 리액트가 뭐하는 앤지 알아봐야 할듯 하다.
리액트 공식 홈페이지에 들어가보면 리액트는 라이브러리 입니다 라고 소개가 되어있고,
공식홈페이지를 제외한 다른 곳에서는 리액트는 프레임워크 입니다 라고 소개가 되어있다.
음..
사실 프레임워크라고 칭하는게 의미상 맞긴 한듯한데,
만든 사람들이 라이브러린데요 ㅡㅡ 라고 하는데 아님 프레임워크임 이라고 하는 것도 좀.. 애매하다.
결론은 뭐라 불러도 상관없을듯 하긴 하다.
프레임워크는 디렉토리 구조가 모두 정해져있고, 그 틀안에서만 움직여야 한다면,
라이브러리는 디렉토리 구조까지는 정해져있지 않지만 코어가 되는 기술들은 대신 만들어준다.
웹페이지를 음식에 비유하자면
프레임워크는 요새 유행하는 밀키트 같은 느낌이다.
웬만한 재료가 다 손질 되어있고 양념장도 들어있다. 걍 불만 떼면 된다.
라이브러리는 시판 양념장 같은 느낌 이랄까...?
이래저러 많은 걸 하긴 해야 되는데 결국 제일 중요한건 대신해준다.
대충 느낌만 받아가면 될듯하다;;
2. React 세팅
밀키트인지 양념장인지 애매한
리액트를 사용하기 위해서는
당연히 세팅이 필요하다.
node 환경에서 create-react-app 를 실행시켜 간편하게 할 수도 있다고 하지만,
처음 배우는 입장에선
그 구조와 원리부터 파헤쳐 보는 게 좋지 않을까 싶다.
교수님 지론 중 하나가
어렵게 해보고 쉽게 해보자.
이다.
어렵게 어렵게 해보자
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
React 공식문서에 나와있는 React cdn이다.
저 두개를 해줘야 기본적인 사용이 가능하다.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
이건 babel cdn 이다.
babel...은 또 뭐하는 샊.. 아니 녀석인지 궁금해진다.
babel 공식문서에 나온 소개는 이러하다
Babel is a JavaScript compiler
.
.곤란하다 컴파일러라니..
생소한 개념이 나왔다.
정확한 의미는 프로그래밍 언어를 기계어로 번역해주는 역할을 하는 애들인데..
a라는 언어를 b라는 언어로 번역 해주는 애라고 보면 될듯하다
그렇다면 React를 쓰는데 왜 babel 이라는 컴파일러가 필요한 걸까?
고건 조금만 더 있다가 알아보고 우선은 세팅을 마쳐보자
<script type='text/babel'></ script>
script 의 type 속성의 default는 'text/javascript' 이다.
모듈화 해서 사용하기 위해선 'module'로 변경을 해줘야하고
babel을 사용하기위해선 'text/babel'로 변경을 해줘야 한다.
이제 저 src 속성에 파일 경로를 넣든지
script 안에서 코드를 작성하던지 하면 된다.
편의를 위해서 그냥 script 안에서 작성할거임
세팅을 마치면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel"></script>
</body>
</html>
요렇게 되어있다.
body 엘리먼트 안에 root라는 id를 가진 div를 하나 볼 수 있다.
저 엘리먼트안에 컴포넌트들을 만들어서 집어넣는 방식으로
spa를 구현하는 방식이다.
3. Component
후우.. 이건 뭔데 또..
라는 생각이 들지만 놀랍게도 이미 비슷한 개념을 알고있다.
이번 3주간의 프로젝트 기간동안 뒤지게 많이 써본 template 이란 element 와 매우 흡사하다.
React 공식문서에 따르면
React 컴포넌트는 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각
라고 component 를 설명하고 있다.
이걸 읽어보니 정말로 template 과 역할이 매우 비슷함을 알 수 있다.
그럼 이거 어케 만듬?
react 에서 component 를 class 또는 함수형으로 만들 수 있다.
함수형은 잠시 제쳐두고 우선은 class형 을 위주로 학습을 하려 한다.
<body>
<div id="root"></div>
<script>
class App extends React.Component {
render() {
return React.createElement('button', null, '컴포넌트 버튼');
}
}
const root = document.querySelector('#root');
ReactDOM.render(React.createElement(App, null, null), root);
</script>
</body>
생긴게 벌써 곤란하게 생겼다.
이런 식으로 모든 엘리먼트를 만들어서 써야된다면 너무너무 불편할거다.
그리고 심지어 리액트가 처음 만들어 졌을때는 이런 형태로 써야했다고 한다.
많은 개발자가 불편함을 느꼈고
이런 불편함을 알고 있던 리액트 개발자들은 (사랑해요 메타..)
JSX라는 새로운 문법을 만들어낸다.
const button = <button>컴포넌트 버튼</button>;
위의 코드는 당연하게도 정상적으로 동작하는 코드가 아니다.
하지만 JSX 문법에서는
const button = React.createElement('button', null, '컴포넌트 버튼');
와 동일한 코드처럼 동작한다.
위의 코드를 아래의 코드로 번역 을 해주는 거다.
...번역..?
우리 위에서 번역 해주는 애 얘기한적 있음
컴파일러
즉 babel을 이용해서 위의 코드를 아래의 코드로 번역한 뒤 동작하게 한다.
물론 babel 을 메타에서 만든건 아니다.
babel은 오픈소스 이고 리액트 사용률은 점점 증대되고 있고,
리액트 개발자들이 문법 다 만들고, 플러그인 까지 다만들어와서
이것도 같이 좀 넣어주셈 하는데 babel에서 굳이 거절할 이유가 없지 않을까..?
babel의 메인테이너들은 얼씨구나 하면서 메타에서 만들어온 플러그인을 삽입했을 거다. 아마도
뇌피셜임..ㅎㅎ
그래서 babel 위에서 뛰노는 jsx 문법으로 위의 코드를 변형해 보자.
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <button>클래스 컴포넌트 버튼</button>;
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
편-안
코드가 훨씬 편안해진걸 확인 할 수 있다.
4. Props
이게 설명하기가 조금 난해한데,
부모 컴포넌트가 자식 컴포넌트에게 값을 전달해주는 역할을 한다고 생각하면 조금 이해가 쉽다.
...말이 어려우면 코드를 보자..!
const root = document.querySelector('#root');
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
class App extends React.Component {
render() {
return (
<div>
<Hello name="sarah" />
<Hello name="carl" />
<Hello name="jason" />
</div>
);
}
}
ReactDOM.render(<App />, root);
위의 코드를 실행 시켜보면
이런 결과가 나온다.
App component 에서 Hello component를 호출 시켰고,
호출을 할때 {name:'sarah'} 이렇게 생긴 객체를 props에 전달했고,
class 내부에서 this.props 로 참조 할 수 있다.
this.....라ㅎㅎㅎ
https://kong-dev.tistory.com/110?category=991165
[Javascript] this 동적 바인딩
0.목차 1. 개요 2. 메소드 생성 3. 메소드 호출 4. this 바인딩 1. 개요 수업에서 객체를 다뤘다. 혼자 객체도 만들어보고 메소드도 만들어보고 메소드로 property 참조하고 이것저것 해보다가, 어느 순
kong-dev.tistory.com
내 블로그에서 가장 많이 참조되는 글이 아닐까 싶다;;
this 바인딩을 이해하는데 조금이라도 도움이 되지 않을까 싶다..
이런 식으로 props를 통해 값을 자식 컴포넌트로 값을 전달 해 줄수 있다.
전체 코드는 Github에 있음
'경일 > React' 카테고리의 다른 글
| [React-native/Expo]Expo에서 Kakao(카카오) 로그인 구현(Webview) (13) | 2022.06.08 |
|---|---|
| [React] router & redux (0) | 2022.05.03 |
| [React] state, event, 조건에 따른 render (0) | 2022.04.13 |
댓글