[패스트 캠퍼스 FE] 리액트 맛보기 -1 (초격차 패키지)

조규준·2022년 5월 4일
0

[패스트 캠퍼스 FE]

목록 보기
14/20
post-thumbnail

😋 리액트 맛보기



🤨 리액트를 시작하기에 앞서...

리액트는 라이브러리의 구조를 가지고 있다.

라이브러리 vs 프레임워크

  • 라이브러리는 개발 편의를 위한 도구의 모음
  • 프레임워크는 기반 구조까지 잡혀있음

-> 라이브러리는 공구
-> 프레임워크는 공장


리액트의 장점

➡️ 생태계가 잘 구성되어 있어 관련 검색 결과가 많아, 공부하기가 수월하다.

💡 📌 Wappalyzer
해당 사이트가 사용하는 라이브러리의 종류를 알 수 있음!



최지민 강사님의 한마디...

🧘 개발을 접하는 마음가짐

기술의 트렌드는 빠르게 변한다.
프론트엔드가 각광받기 시작한지 그리 오래되지 않았다.
그렇기 때문에 새로운 기술을 빠르게 익히는 능력이 중요하다!

공부 방법

처음에는 어려운게 당연하다. 하지만 이 또한 반복하면 된다.

리액트를 라이브러리로서 접근,
약 20여개의 다양한 라이브러리들을 반복 접근,

공식문서를 토대로 익힌다. (만든이의 사용 설명서)
그 안의 패턴을 찾고, 새로운 기술을 익히는 요령을 습득!

공식문서와 친해지기
거의 모든 강사님들이 이렇게 말씀하신다... 새겨듣자...!






DOM 다루기 Element 생성하기



Dom 과 element 란?

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>

기존의 코드 리액트 문법으로 바꾸기


최종 정리






JSX와 Babel 다루기



JSX란?

문자도 HTML도 아닌 JavaScript확장 문법
React.createElement 표현식을 좀 더 편하게 쓰기 위한 표현법.

  • 장점

    모든것을 변수화 할 수 있음

  • 예시


Babel 이란?

javascript로 결과물을 만들어주는 컴파일러
(html의 모양을 javascript로 가져옴)

babel unpkg cdn

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  • 적용해보기

    이거 꼭 추가해야함.

    <script type="text/babel">


Spread 연산자

이런식으로 ... 을 사용해서 표현식을 간략화 할 수 있다.

const props = { className : titleClassName,children: text};
const customH1 = (
  <h1 className={props.className} children={props.children}/>
);
// 이 위의 식을
const customH1 = <h1 {...props} />;
// 이렇게 표현가능

최종 정리

JSXReact.createElement를 표현한 식으로써,
기본적으로 React "엘리먼트(element)" 를 생성한다.

JSX는 변수에도 html 태그명을 담을 수 있게 해주고,
그 외의 모든 값들을 변수화 해서 javascript 다루듯이 다룰 수 있게 해준다.

Babel은 이 JSXjavascript가 이해할 수 있게끔 바꿔주는 컴파일러이다.






멀티 Element 생성하기


요런식으로 생성 가능!

근데 이런식으로 만들면, <h1>태그들을 <div>태그의 children으로 넣어주는 방식인데,
<div> 태그를 안쓰고 싶으면?

-> 태그 넣는 자리에 React.Fragment 를 사용하면 됨!

근데 이렇게 만들어도 됨; 띠용~

근데 이렇게 생략해도 됨; 띠용~


최종 정리






Element 찍어내기


이런식으로 찍어낼 수 있다!

📌 아 이게 React지!

리액트에서 첫번째 인자는 타입, 두번째는 props,
이 Paint 함수에서는 props를 여러개 넘긴 것임.
그리고 JSX 표현식을 return 함

최종 정리






JS와 JSX, 섞어쓰기


📌 Text가 대문자일 경우 <h1>태그를 리턴하고, 소문자일 경우 <h3> 태그를 리턴하는 예제.

이때, <h1>태그는 JSX이고, {test}JS 이다.
(한가지 문서 안에서 JSXJS를 섞어씀 ➡️ interpolation)


📌 Number라는 JSX를 return하는 function을 만들고,
map으로 for문을 돌려서, 3의 배수일 경우에만 <h1>태그를 리턴하는 예제


최종 정리

사실 우리는 이미 섞어 쓰고 있었다!


결론

📌 그래서 JavaScript의 장점을 React에서 Element를 그릴때 사용할 수 있다!






🧑🏻‍💻 오늘의 회고


드디어 리액트를 들어갔다.

예전에 아무것도 모를때 리액트를 막 사용했었는데,
'내가 도대체 어떻게 한거지...?' 라는 생각이 들 정도로,
배우면서 "정말 내가 아는게 하나도 없구나!" 라고 느꼈다

새삼 과거의 내가 대단하게 느껴졌다...
어라라? 나 예전엔.. 강했을지도...?

한번 훑고왔던 미래이니, (남은건 별로 없지만...)
지금은 훨씬 더 잘할 수 있다는 마음가짐으로 계속 학습하고, 반복하자!!!


📌 더 공부할 내용

map 함수

profile
사주보는 프론트엔드 개발자

0개의 댓글