Hello It's good to be back ^_^

[ECC-프론트엔드 2팀] 14주차 스터디 본문

Study/프론트엔드

[ECC-프론트엔드 2팀] 14주차 스터디

HongYeon 2024. 12. 28. 22:13
교재:  소플의 처음 만난 리액트 00 ~ 05

 

공부한 페이지: pp. 28 ~ 179

실습한 내용:  https://github.com/HongYeonLee/ECC-Frontend-Study

 

GitHub - HongYeonLee/ECC-Frontend-Study: ECC 49기 FW 프론트엔드 2팀 스터디 내용을 기록하는 레포지토리입

ECC 49기 FW 프론트엔드 2팀 스터디 내용을 기록하는 레포지토리입니다. Contribute to HongYeonLee/ECC-Frontend-Study development by creating an account on GitHub.

github.com

목차

 

00 자바스크립트 기본 문법

  • 0.1 HTML 살펴보기
  • 0.2 CSS란 무엇인가?
  • 0.3 자바스크립트
  • 0.4 개발 환경 설정하기

01 리액트 소개

  • 1.1 리액트는 무엇인가?
  • 1.2 리액트의 장점
  • 1.3 리액트의 단점

02 리액트 시작하기

  • 2.1 HTML만으로 간단한 웹사이트 만들기
  • 2.2 CSS를 사용하여 웹사이트 스타일링하기
  • 2.3 웹사이트에 React.js 추가하기
  • 2.4 create-react-app

03 JSX 소개

  • 3.1 JSX란?
  • 3.2 JSX의 역할
  • 3.3 JSX의 장점
  • 3.4 JSX 사용법
  • 3.5 JSX 코드 작성해 보기

04 엘리먼트 렌더링

  • 4.1 엘리먼트에 대해 알아보기
  • 4.2 엘리먼트 렌더링하기
  • 4.3 렌더링된 엘리먼트 업데이트하기
  • 4.4 시계 만들기

05 컴포넌트와 Props

  • 5.1 컴포넌트에 대해 알아보기
  • 5.2 Props에 대해 알아보기
  • 5.3 컴포넌트 만들기
  • 5.4 컴포넌트 합성
  • 5.5 컴포넌트 합성
  • 5.6 댓글 컴포넌트 만들기

 

0.1 HTML 살펴보기

Hyper Text Markup Language의 약자로 마크업 언어의 한 종류

마크업이란 문서나 데이터를 처리하기 위해 문서에 추가되는 종류로 마크업 언어는 이러한 마크업 정보를 표현하기 위한 언어라고 한다

 

SPA - Single Page Application

: 여러 HTML의 파일이 존재하는 웹 페이지를 하나의 페이지만 존재하는 웹사이트로 관리하는 것으로 리액트가 body태그 안의 content를 채워넣는 역할을 한다

 

 

0.2 CSS란 무엇인가?

 

CSS - Cascading Style Sheets, 웹 사이트 꾸미기용 언어

 

0.3 자바스크립트

 

자바스크립트 - 웹 사이트에서 사용자의 동적인 행동을 관리하는 언어로 런타임 언어이다

 

자료형

: 변수를 선언하는 시점이 아니라 데이터가 대입되는 시점에 변수의 자료형이 결정된다. 이를 동적 타이핑이라고 한다.

Number 타입 - 정수, 소수

String 타입 - 문자열

Boolean 타입 - true, false

Null 타입 - null, 정의는 되었으나 값이 없는 변수

Undefined 타입 - 정의되지 않은 변수

Array 타입 - 배열, 같은 타입이 아니여도 들어갈 수 있다

Object 타입 - 이름(key)과 값(value)로 이루어진 쌍의 집합, HashMap과 유사하다

Object타입의 예시

 

리액트의 컴포넌트 중 함수 컴포넌트가 하나의 자바스크립트 함수이다

 

0.4 개발 환경 설정하기

 

Node.js - 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경

npm - node package manager의 약자로 Node.js를 위한 패키지 매니저

패키지 매니저 - 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제를 도우는 역할

 

1.1 리액트는 무엇인가?

 

리액트란? 

- 웹과 네이티브 사용자 인터페이스를 위한 라이브러리로 메타에서 만든 오픈소스 프로젝트, SPA를 쉽고 빠르게 만들 수 있게하는 도구

 

라이브러리란?

- 자주 사용되는 기능을 정리해 모아 놓은 것

 

사용자 인터페이스

- 사용자와 컴퓨터 프로그램이 서로 상호작용하기 위해 중간에서 서로 간의 입력과 출력을 제어해주는 것

예를 들어 웹 사이트의 버튼, 텍스트 입력창 등

 

대표적인 자바스크립트 UI 프레임워크

- 앵귤러JS, 리액트JS, VueJS

 

프레임워크와 라이브러리의 차이

프레임워크 - 흐름의 제어 권한을 프레임워크가 가지고 있다

라이브러리 - 흐름의 제어 권한이 개발자가 가지고 있다

 

1.2 리액트의 장점

 

1. Virtual DOM을 이용해 웹사이트를 탐색할 때 화면에 나타나는 내용을 빠르게 나타나게 한다

Virtual Dom이란 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것을 말한다.

 

2. 컴포넌트 기반 구조

컴포넌트란 구성요소라는 뜻으로, 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러개의 컴포넌트로 구성될 수 있다

 

3. 재사용성 (Reusability)

 

4. 메타의 지원

 

5. 커뮤니티 활성화

깃허브와 스택오버플로우에서 리액트 언급량이 많다

 

6. 모바일 앱 개발 기능

리액트를 배운 후 리액트 네이티브라는 모바일 환경 UI 프레임워크 사용이 가능하여 개발 진입장벽이 낮다

안드로이드 - 코틀린 (Kotlin)

iOS - 스위프트 (Swift)

 

1.3 리액트의 단점

 

1. 방대한 학습량

 

2. 높은 상태의 관리 복잡도

state - 리액트 컴포넌트의 상태를 의미한다. Virtual Dom이 바뀐 부분만을 찾아서 실제 DOM을 업데이트 하므로 state가 바뀐 컴포넌트를 찾는다. 성능 최적화를 위해 state를 잘 관리하는 것이 중요하다

 

 

2.1 HTML만으로 간단한 웹사이트 만들기

 

<!DOCTYPE html>
<html>
<head>
    <title>홍연의 블로그</title>
</head>
<body>
    <h1>홍연의 블로그에 오신 여러분을 환영합니다!</h1>
</body>
</html>

 

 

2.2 CSS를 사용하려 웹사이트 스타일링하기

 

<!DOCTYPE html>
<html>
<head>
    <title>홍연의 블로그</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <h1>홍연의 블로그에 오신 여러분을 환영합니다!</h1>
</body>
</html>
h1{
    color: green;
    font-style: italic;
}

 

 

2.3 웹사이트에 React.js 추가하기

 

<!DOCTYPE html>
<html>
<head>
    <title>홍연의 블로그</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <h1>홍연의 블로그에 오신 여러분을 환영합니다!</h1>

    <div id = "root"></div> <!--DOM 컨테이너로 사용될 div-->

    <script crossorigin src = "https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="MyButton.js"></script> <!--리액트 컴포넌트 가져오기-->
</body>
</html>
function MyButton(props){
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(MyButton));

 

2.4 create-react-app

 

create-react-app - 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구

 

 

저작자표시 비영리 변경금지

'Study > 프론트엔드' 카테고리의 다른 글

[ECC-프론트엔드 2팀] 13주차 스터디  (1) 2024.12.21
[ECC-프론트엔드 2팀] 9주차 스터디  (0) 2024.11.22
[ECC-프론트엔드 2팀] 8주차 스터디  (1) 2024.11.16
[ECC-프론트엔드 2팀] 7주차 스터디  (0) 2024.11.12
[ECC-프론트엔드 2팀] 6주차 스터디  (0) 2024.11.12
'Study/프론트엔드' Related Articles more