2024-05-13 React Day1

Web/React

2024-05-13 React Day1

nomad06 2024. 5. 13. 08:54

리액트(React)
- Facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리
- 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공
- Virtual DOM을 사용해서 실제 DOM 조작을 최소화하고 성능을 향상
- 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용
- JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴퍼넌트를 정의

라이브러리(library) vs 프레임워크(Framework)
라이브러리
    - 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식으로 동작
    - 애플리케이션의 전체 구조를 개발자가 직접 설계
    - 추가적인 기능을 제공하거나 특정 기능을 수행하기 위한 도구

프레임워크
    - 제공된 틀 안에서 코드를 작성하고 프레임워크가 코드를 호출하여 실행
    - 개발자는 프레임워크가 정의한 규칙과 패턴을 따라야  함
    - 애플리케이션의 구조와 제어 흐름을 결정하며, 개발자는 프레임워크에 의해 제어되는 애플리케이션의 일부분을 작성

터미널 툴

맥: iterm2 다운로드
윈도우: cmder 다운로드  (https://cmder.app/)

node -v

npm -v

git --version

corepack enable
- node.js의 패키지 매니저인 npm의 새로운 기능
- npm의 내장 패키지 설치 속도를 향상시키는 기능
- npm 7 이후의 도입된 기능

yarn -v

npm i -g corepack

패키지 도구
1. npm(Node Package Manager)
- Node.js 패키지를 관리하고 배포하는 데 사용되는 표준 패키지 관리자
- 패키지를 설치하거나 업데이트하며, 프로젝트를 빌드 및 실행하는 데 사용

2. npx(Node Package Excute)
- npm 패키지를 실행하고 사용하는 도구
- 로컬에 설치된 패키지를 직접 실행할 수 있음(프로젝트에 의존성을 전역으로 설치하지 않고도 패키지를 사용)
- 예) npx create-react-app 앱이름

3. yarn
- JavaScript 패키지 매니저로, npm과 유사한 역할을 함
- Facebook, Google, Exponent .. 개발자들이 공동으로 개발한 오픈 소스 프로젝트
- npm보다 빠른 속도와 안정적인 패키지 설치를 제공하며 다양한 기능을 포함

리엑트 앱 만들기

yarn create react-app basic

리엑트 공식 사이트

https://react.dev/learn

Quick Start – React

The library for web and native user interfaces

react.dev

create-react-app을 사용하여 앱을 생성 후 기본 디렉토리 및 파일

public 디렉토리
브라우저에서 직접 액세스할 수 있는 파일들이 포함
    index.html: 웹 애플리케이션의 진업점

src 디렉토리
애플리케이션의 소스 코드를 포함
    index.js: React 앱의 진입점 파일. ReactDOM.render를 호출하여 React 컴퍼넌트를 DOM에 렌더링
    App.js: 기본적인 앱 컴퍼넌트가 정의된 파일. 앱의 기본 구조와 레이아웃을 정의
    App.css: App 컴퍼넌트에 적용되는 CSS 스타일을 정의

// Hello.js

import React from "react";

function Hello(){

return <div>안녕하세요 React</div>

}

export default Hello;

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

return (

);

}

export default App;

여러개 불가능 <div> </div>

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

return (

);

}

export default App;

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

return (

<div>

</div>

);

}

export default App;

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

return (

<div>

</div>

);

}

export default App;

<> </> // 빈 <> 사용

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

return (

</>

);

}

export default App;

// App.js

import React from "react";

import Hello from "./Hello";

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

<div style={style}>아이디: {userid}</div>

</>

);

}

export default App;

   문제
   App.css에 아래와 같이 style을 설정하고 App.js에 적용해보자

    이름: .black-box
    속성:
        background: black;
        width: 80px;
        height: 80px;

/* App.css */

.black-box {

background: black;

width: 80px;

height: 80px;

}

// App.js

import React from "react";

import Hello from "./Hello";

import './App.css';

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

<div style={style}>아이디: {userid}</div>

</>

);

}

export default App;

크롬 브라우저 확장 프로그램 설치
React Developer Tools

JSX에서의 주석

{/* 주석을 작성 */}

// App.js

import React from "react";

import Hello from "./Hello";

import './App.css';

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

{/* 주석은 화면에 보이지 않습니다 */}

/* 자바스크립트 문법의 주석 */

<div style={style}>아이디: {userid}</div>

</>

);

}

export default App;

컴퍼넌트에게 값 전달하기

    JSX에서의
    <Hello userid="apple"/>

    Component
    function Hello(props){
        <div>안녕하세요. {props.userid}님</div>
    }

// Hello.js

import React from "react";

function Hello(props){

return <div style={{ color: props.color }}>안녕하세요 {props.userid}({props.name})</div>

}

export default Hello;

// App.js

import React from "react";

import Hello from "./Hello";

import './App.css';

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

{/* 주석은 화면에 보이지 않습니다 */}

/* 자바스크립트 문법의 주석 */

<div style={style}>아이디: {userid}</div>

</>

);

}

export default App;

// Member.js

import React from 'react';

function Member({userid, name, color}){

return <div style={{color}}>안녕하세요{userid}({name})</div>

}

export default Member;

// Hello.js

import React from "react";

function Hello(props){

return <div style={{ color: props.color }}>안녕하세요 {props.userid}({props.name})</div>

}

Hello.defaultProps = {

userid: '아이디없음',

name: '이름없음',

color: 'blue'

}

export default Hello;

// App.js

import React from "react";

import Hello from "./Hello";

import Member from "./Member";

import './App.css';

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

{/* 주석은 화면에 보이지 않습니다 */}

/* 자바스크립트 문법의 주석 */

<div style={style}>아이디: {userid}</div>

</>

);

}

export default App;

// Member.js

import React from 'react';

function Member({userid, name, color, isLover}){

return <div style={{color}}>안녕하세요{userid}({name} { isLover && <b>❤</b> })</div>

{/* { isLover ? <b>'❤'</b> : null} */}

}

export default Member;

// App.js

import React from "react";

import Hello from "./Hello";

import Member from "./Member";

import Wrapper from "./Wrapper";

import './App.css';

function App(){

const userid = 'apple';

const style = {

backgroundColor: 'deepskyblue',

color: 'deeppink',

fontSize: 30,

padding: '1em'

}

return (

{/* 주석은 화면에 보이지 않습니다 */}

/* 자바스크립트 문법의 주석 */

<div style={style}>아이디: {userid}</div>

</Wrapper>

</>

);

}

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://react.dev/learn/writing-markup-with-jsx

Writing Markup with JSX – React

The library for web and native user interfaces

react.dev

참고하면서 하기

문제
JSX를 사용하여 아래와 같이 출력되도록 작성해보자.
(단, 프로젝으의 이름은 jsx로 함)

    김사과님이 학습한 내용들
    * 파이썬
    * HTML
    * CSS
    * JavaScript
    * MySQL
    * MongoDB

    [이미지]

yarn create react-app jsx

/* App.css */

.deeppink{

color: deeppink;

}

// App.js

import React from "react";

import './App.css';

function App() {

const name = '김사과';

const list = ['파이썬', 'HTML', 'CSS', 'JavaScript', 'MySQL', 'MongoDB'];

return (

<ul>

{

list.map((item) => (

))

}

</ul>

</>

);

}

export default App;

변환 사이트

https://transform.tools/html-to-jsx

HTML to JSX

to TypeScript Declaration to TypeScript Declaration

transform.tools

'Web > React' 카테고리의 다른 글

2024-05-17 Day3 (0)	2024.05.17
2024-05-16 react Day2 (0)	2024.05.16

현재글2024-05-13 React Day1

IHS_digital_nomad

개발 블로그

mongodb, 파이썬 #컬렉션과 반복문, 파이썬 스페셜(매직) 메소드, 디렉토리관리, 파이썬 #딕셔너리, sequelize, 변수의 범위, 출력문, 구글코랩, 파이썬, 클래스 #객체지향, 파이썬 #, 파이썬 #사용자 정의 함수, 데이터베이스정리, ORM, 파이썬설치, 람다함수, 스페셜(매직) 메소드, 객체지향과 클래스, 파이썬 #파이썬 주민등록번호,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

IHS_digital_nomad