1) What is React?
React는 javascript 언어를 사용하고 컴포넌트를 기반으로 쓰이는 라이브러리이다!
컴포넌트란!
1) 소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 쉽게 할 수 있도록 하는 기술을 말한다.
-> 리액트를 쓰면 각각의 컴포넌트를 만들 수 있는데 각각의 컴포넌트가 하나의 레고가 되는 것!
.
2) 컴포넌트 기술을 활용하면 복잡한 정보 시스템을 신속하게 구축할 수 있으며, 유사한 정보 시스템을 구축할 때 재사용이 가능한 장점이 있다.
-> 재사용이 가능한 장점이 바로 리액트를 쓰는 이유이다!! 필요한 부분들을 나눠서 구성해놓고 필요한 곳에 갖다 쓸 수 있다는 것이 생각만해도 얼마나 편리한가!
.
출처: 매일경제
리액트가 좋은 이유를 두개 더 말하자면!
먼저, 페이스북에서 개발한 라이브러리라는 점이다.
즉, 유지보수가 잘 될 것이라는게 보장(?)되어있기때문!
페이스북과 인스타 모두 리액트로 개발되었다! 그렇기때문에 그들이 쓰기 위해서라도 유지보수는 지속될 것이라고 한다!ㅎㅎ
두번째는, 리액트를 사용하면 페이지를 이동하지 않고 다른 정보를 쉽게 불러올 수 있다는 점!
2) React는 프레임워크? 라이브러리?
리액트는 프레임워크인가 라이브러리인가! 처음에 좀 헷갈렸다.
아니 애초에 둘의 개념이 명확히 자리잡지 않았기 때문인듯하다.
이해는 노마드코더의 유투브 영상을 보고 했다ㅎㅎ
링크텍스트
노마드코더에서 얘기하기를
라이브러리 -> 라이브러리를 가져오면 내가 쓰고싶은 곳에서 마음대로 사용할 수 있음
프레임워크 -> 프레임워크가 정해준 룰대로 내가 거기에 맞춰서 코드를 짜야함
리액트는 리액트정식 사이트에서 말하길 본인들이 라이브러리라고 한다!
내가 리액트를 마음대로 갖다 쓸 수 있다는 뜻이겠지??
3) How to use React?
리액트 라이브러리를 갖다 쓰는 방법은 간단하다!
<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를 쓸 때 바벨을 같이 설정해준다.
(CRA에도 기본적으로 들어가 있다고 함)
바벨은?
-> 자바스크립트 컴파일러
입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.
.
출처: https://ljs0705.medium.com/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>바벨 설정 코드!
그리고 바벨을 가져와서 썼을때는 스크립트 타입을 => script type="text/babel" 이렇게 설정해줘야함!!
4) React로 Hello world 찍어보기
React와 babel을 잘 가져왔다면 이제 ReactDOM을 사용해서 Hello world를 찍을 수 있다!
<!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/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React world!</h1>,
document.querySelector('#root') // 인자값을 두가지 받는다, 첫번째는 내가 넣을 내용, 두번째는 내가 넣을 위치
)
</script>
</body>
</html> ReactDOM.render()는 인자값을 두개 가지는데
첫번째 인자값은 넣을 내용, 두번째 인자값은 내용을 넣을 위치이다!
이제 리액트의 세계로 발돋움을 시작했다!!!
리액트 고수가 되는 그날까지 열심히 달릴 예정!!!
안녕하세요!😊 국비지원으로 개발쪽 공부를 시작한 학생입니다!
혹시나 제가 잘못된 정보를 제공하고 있다면 댓글 부탁드립니다! 💚
글 읽어주셔서 정말 감사합니다🙇♀️
