[TIL] D+52 리액트 실습 시작

1️⃣ 리액트 입문 2주차

리액트 개발환경 세팅부터

 

📌 개발환경 세팅

리액트로 개발을 하기 위해 필수적으로 설치해야하는 것들!

• 크롬 브라우저 - 우리가 만들 웹은 브라우저에서 구동되기 때문에 가장 많이 쓰는 크롬 설치
• VScode - 설명이 필요없는 코드 에디터 ㅎㅎ
• git - 작성한 코드를 저장 및 관리하고 다른 사람과 공유할 수 있는 툴
• Node - 자바스크립트 코드를 실행해주는 도구(LTS 버전 설치)
• yarn - 자바스크립트 패키지 관리자, 프로젝트 의존성을 관리하는 도구

---

📌 리액트 프로젝트 생성 방법

1️⃣ CRA

한 줄의 명령어 입력으로 개발 필수요소를 자동 구성하는 방법

 

1) 프로젝트를 셋업할 경로로 이동한 후, 다음 CRA 명령어를 입력한다.

yarn create react-app [원하는 프로젝트 이름]

 

2) 성공 메시지를 확인한 후, 아래 명령어를 통해 react 프로젝트를 실행시킬 수 있다.

cd react-cra-app
yarn start

 

3) 완성~

 

2️⃣ Vite

프론트엔드 개발을 위한 새로운 빌드 도구, Vue.js 창시자가 개발했다.

CRA보다 속도가 빠르고 필요에 따라 설정을 더 쉽게 조정할 수 있다는 장점이 있다.

 

1) 아래 명령어로 프로젝트를 생성한다.

yarn create vite [원하는 프로젝트 이름] --template react

 

2) 프로젝트가 생성된 것을 확인한 후, 다음 명령어를 통해 프로젝트에 접근하고 실행한다.

cd [생성한 프로젝트 이름]
yarn
yarn dev

 

3) 완성~

3️⃣ 노가다

는 생략 ㅎㅎ...

천재들이 만들어놓은 좋은 기술을 씁시다 ! ^.^

 

---

📌 프로젝트 훑어보기

1️⃣ index.html

 

SPA(Single Page Application)에는 html 파일이 한 개만 있다.

우리가 만든 React 프로젝트에도 index.html 파일 한 개만 존개한다.

 

박스 안 코드를 통해 main.jsx 파일로부터 CSR* 방식으로 UI를 구성하고 변경한다.

*CSR(Client-Side Rendering) : 웹 페이지를 렌더링하는 방식 중 하나, 브라우저(클라이언트)에서 HTML을 동적으로 생성하고 화면에 표시하는 방법

 

2️⃣ main.jsx

 

index.html 파일에서는 main.jsx 파일을 사용하고 있다.

main.html 파일에서는 App.jsx 파일을 임포트하여 사용하고 있다.

 

3️⃣ App.jsx

 

App.jsx 에는 좌측 화면에 대한 코드가 적혀있다.

이 파일에서 코드를 수정하면 된다!!!

---

📌 React Components

리액트 컴포넌트는 "웹 페이지를 구성하는 작은 조각들"

각 컴포넌트는 HTML 처럼 보이는 코드와 JavaScript 로직을 한데 모아놓은 것으로

웹 페이지의 특정 부분을 만들고 관리하는 데 사용된다.

 

쉽게 비유하자면 리액트 컴포넌트는 레고 블록이다.

레고 블록(컴포넌트)을 하나하나 조립해서 하나의 완성된 건물(전체 웹 페이지)을 만드는 것이다!

 

리액트 컴포넌트를 표현하는 방법은

함수형 컴포넌트/클래스형 컴포넌트 두 가지가 있다.

기능상으로는 동일하지만 공식 홈페이지에서는 함수형 컴포넌트의 사용을 권장한다.

그리고 함수형 컴포넌트가 훨씬 쉽고 많이 사용한다.

 

함수형 컴포넌트 ⬇️

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

 

클래스형 컴포넌트 ⬇️

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

---

📌 컴포넌트 보는 방법

컴포넌트(함수) 코드를 볼 때는 영역을 나누어 본다.

 

컴포넌트 밖에서는 내가 필요한 파일을 import하거나 export default 라는 기능을 통해

내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.

 

컴포넌트 안에는 자바스크립트를 쓰는 부분이 있다.

 

그리고 return 기준 아랫부분에는 JSX를 작성하는 부분이 있다.

여기 작성한 JSX 코드와 값들이 화면에 보여진다.

---

📌 JSX

JavaScript + XML(HTML) => JSX

브라우저는 JS만 해석 가능해서 jsx파일을 직접 해석할 수 없지만

babel이라는 것을 이용하여 jsx를 js로 변환하여 본다.

 

1️⃣ 태그는 아래와 같이 꼭 닫아주어야 한다.

<input type='text'/>

 

2️⃣ 무조건 한 개의 엘리먼트만 반환해야한다.

만약 div가 동일한 계층에 두 개 있으면 오류가 발생한다.

import "./App.css";

function App() {
  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type="text" />
    </div>
  );
}

export default App;

 

3️⃣ JSX에 JavaScript 값을 가져오려면 중괄호({})를 쓴다.

값을 가져올 때 뿐만 아니라 map,삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 중괄호를 이용할 수 있다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

 

4️⃣ class 대신 className을 사용한다.

<div className="App">

 

5️⃣ 인라인으로 Style 줄 때에는 중괄호를 두 번 쓴다.

혹은 스타일 객체를 변수로 만들어 쓸 수도 있다.

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

---

2️⃣ 디자인 집중반

UX/UI 스타일 탐색

 

시대별 UX/UI 디자인 트렌드에 대한 강의를 듣고...

지난 번 과제를 플랫 디자인/글래스 모피즘 두 가지 스타일로 베리하는 과제를 받았다

저번 과제 와이어 프레임으로만 냈는데 ㅎㅅㅎ... 큰일나따...

1월 6일 아침까지 제출이니까 ... 그 때까지 열심히 해보자...!! 아자아자자잣

---

느낀 점, 새롭게 깨달은 것💡

- 힘들었다고 낙담하지 말자 앞으로 더 힘들 일이 많다 ^ㅅ^

오늘의 잘한 점🥰

- 혈압이 낮은 편이라... 자주 잠오고 피곤한데... 잠깨려고 설거지도 하고 운동도 하고ㅋㅋ 별 난리를 다침 ㅠㅠ 안자려고 쌩쑈함...

오늘의 문제점,부족한 것😵‍💫

- 리액트 너무 어렵당... 재밌지만 어렵다 ㅎㅎ

해결방법👊

- 꾸준히 공부하면서 모르는 건 튜터님과 지피티에게 물어보자