리액트는 라이브러리의 구조를 가지고 있다.
라이브러리 vs 프레임워크
- 라이브러리는 개발 편의를 위한 도구의 모음
- 프레임워크는 기반 구조까지 잡혀있음
-> 라이브러리는 공구
-> 프레임워크는 공장
리액트의 장점
➡️ 생태계가 잘 구성되어 있어 관련 검색 결과가 많아, 공부하기가 수월하다.
💡 📌 Wappalyzer
해당 사이트가 사용하는 라이브러리의 종류를 알 수 있음!
🧘 개발을 접하는 마음가짐
기술의 트렌드는 빠르게 변한다.
프론트엔드가 각광받기 시작한지 그리 오래되지 않았다.
그렇기 때문에 새로운 기술을 빠르게 익히는 능력이 중요하다!
공부 방법
처음에는 어려운게 당연하다. 하지만 이 또한 반복하면 된다.
리액트를 라이브러리로서 접근,
약 20여개의 다양한 라이브러리들을 반복 접근,공식문서를 토대로 익힌다. (만든이의 사용 설명서)
그 안의 패턴을 찾고, 새로운 기술을 익히는 요령을 습득!
✅ 공식문서와 친해지기
거의 모든 강사님들이 이렇게 말씀하신다... 새겨듣자...!
Element
우리 눈에 보여지는 것
DOM (Document Object Model)
컴퓨터(브라우저)가 이해하는 element의 원형
Dom 공식 문서
리액트 맛보기 동안 사용할 도구들
https://www.w3schools.com/
각종 html,css,js 코드들을 사용하면서 결과를 바로바로 확인할 수 있는 사이트!
📌 코드 샌드박스
마찬가지로 프론트엔드 코드를 작성하고 이것저것 시도해볼 수 있는 사이트
React 등 다양한 환경에 대한 기본 설정이 되어있음
CDN (Content Delivery Network)
웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템 (unpkg)
공식 문서
기존의 코드에 아래의 코드를 추가하면 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>
기존의 코드 리액트 문법으로 바꾸기
문자도
HTML
도 아닌JavaScript
의 확장 문법
React.createElement
표현식을 좀 더 편하게 쓰기 위한 표현법.
장점
모든것을 변수화 할 수 있음
예시
javascript
로 결과물을 만들어주는컴파일러
(html
의 모양을javascript
로 가져옴)
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
이거 꼭 추가해야함.
<script type="text/babel">
이런식으로
...
을 사용해서 표현식을 간략화 할 수 있다.const props = { className : titleClassName,children: text}; const customH1 = ( <h1 className={props.className} children={props.children}/> ); // 이 위의 식을 const customH1 = <h1 {...props} />; // 이렇게 표현가능
JSX
는React.createElement
를 표현한 식으로써,
기본적으로 React "엘리먼트(element)" 를 생성한다.
JSX
는 변수에도html
태그명을 담을 수 있게 해주고,
그 외의 모든 값들을 변수화 해서javascript
다루듯이 다룰 수 있게 해준다.
Babel
은 이JSX
를javascript
가 이해할 수 있게끔 바꿔주는컴파일러
이다.
요런식으로 생성 가능!
근데 이런식으로 만들면,
<h1>
태그들을<div>
태그의children
으로 넣어주는 방식인데,
<div>
태그를 안쓰고 싶으면?-> 태그 넣는 자리에
React.Fragment
를 사용하면 됨!
근데 이렇게 만들어도 됨; 띠용~
근데 이렇게 생략해도 됨; 띠용~
이런식으로 찍어낼 수 있다!
📌 아 이게 React지!
리액트에서 첫번째 인자는 타입, 두번째는 props,
이 Paint 함수에서는 props를 여러개 넘긴 것임.
그리고 JSX 표현식을 return 함
📌 Text가 대문자일 경우
<h1>
태그를 리턴하고, 소문자일 경우<h3>
태그를 리턴하는 예제.
이때,
<h1>
태그는JSX
이고,{test}
는JS
이다.
(한가지 문서 안에서JSX
와JS
를 섞어씀 ➡️interpolation
)
📌 Number라는 JSX를 return하는 function을 만들고,
map으로 for문을 돌려서, 3의 배수일 경우에만<h1>
태그를 리턴하는 예제
사실 우리는 이미 섞어 쓰고 있었다!
결론
📌 그래서
JavaScript
의 장점을React
에서Element
를 그릴때 사용할 수 있다!
드디어 리액트를 들어갔다.
예전에 아무것도 모를때 리액트를 막 사용했었는데,
'내가 도대체 어떻게 한거지...?' 라는 생각이 들 정도로,
배우면서 "정말 내가 아는게 하나도 없구나!" 라고 느꼈다새삼 과거의 내가 대단하게 느껴졌다...
어라라? 나 예전엔.. 강했을지도...?한번 훑고왔던 미래이니, (남은건 별로 없지만...)
지금은 훨씬 더 잘할 수 있다는 마음가짐으로 계속 학습하고, 반복하자!!!
map 함수