[TIL] 유데미X사람인 취업 부트캠프 1기 32일차 / react 기초

[1. 오늘 배운 것]

1, 터미널(CLI)환경

- 컴퓨터와 대화하는 텍스트 기반 인터페이스

 

2. 터미널 명령어

- pwd : 현재 작업중인 디렉토리 경로 표현, 예시) pwd

- cd : 현재 작업 디렉토리를 변경할 때 사용, 예시) cd Documents

- mkdir : 새 디렉토리 생성, 예시) mkdir Project

- ls : 현재 디렉토리의 파일과 폴더를 보여줌, 예시 ) ls

- touch : 새로운 파일 생성, 예시) rm hello.js

- mv : .파일/디렉터리 이동 또는 이름 바꾸기

 

3. Node.js와 npm

- Node.js : Javascript를 브라우저 밖에서 실행할 수 있도록 해주는 환경, 서버사이드 개발, 빌드 도구, 스크립트 실행 등 다양한 곳에서 사용

- npm : Node.js의 패키지 관리자, Javascript 라이브러리와 응용 플랫폼을 공유하고 관리하는 플랫폼

 

4. npm 사용법

- 프로젝트 초기화 : npm init 또는 npm init -y 

- 패키지 설치 : npm install 패키지이름

- 스크립트 파일 실행 : package.json파일에 정의한 스크립트를 npm 명령어로 실행, npm run start

 

5. npx

- node.js실행을 위한 패키지 실행도구

 

6. React 개발에서의 node.js와 npm 그리고 npx

- react 어플리케이션 개발을 시작할 수 있는 템플릿과 필요한 라이브러리들을 자동으로 설치해줌

- CRA

npx create-react-app 원하는 프로젝트명

 

- 개발 서버 실행

npm run start

 

- react 빌드

npm run build

 

7. npm

- Node.js의 패키지 관리자, Javascript라이브러리와 응용 프로그램을 공유하고 관리하는 플랫폼

 

8. npm 기본 사용법

- 프로젝트 초기화

npm init (또는 npm init -y)

 

- 패키지 설치

npm i 패키지이름

 

- 패키지 삭제

npm uninstall 패키지이름

 

9. npx란

- Node.js를 위한 패키지 실행 도구

 

10. React 입문

- React : UI제작을 도와주는 자바스크립트 라이브러리

- 자바스크립트 라이브러리이기 때문에 cdn등을 활용해서 간단히 사용해볼 수 있음

- cdn : 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크

 

11. SPA

- 한 번의 페이지 로드로 전체 웹서비스에 팔요한 모든 콘텐츠를 동적으로 렌더링하는 웹 애플리케이션

- 사용자와의 상호작용에 따라 필요한 부분만 JavaScript를 통해 갱신함

- 결국 전체 페이지를 새로 불러오는 대신, 필요한 데이터만 주고받을 수 있음

- 빠르고 부드러운 사용자 경험 제공

 

12. React Component vs React Element

(1) 리액트 컴포넌트

- UI의 한 부분을 캡슐화한 코드 블록

- 과거에는 클래스를 사용하여 컴포넌트를 만들었으나 이제는 함수로 만드는 것이 일반적

function Greeting() {
	return <div>Hello World</div>
}

 

(2) 리액트 엘리먼트

- 컴포넌트의 인스턴스로 화면에 표시할 내용을 기술한 객체

- JSX문법을 사용하여 생성할 수 있음

<Greeting />

 

13. React 주요 사용법 익히기

- CRA로 만든 리액트 프로젝트의 구조

- node_modules : npm으로 설치한 패키지들이 저장되어있는 디렉터리

- public : 우리 웹서비스의 루트 경로(/)에서 바로 접근 간으한 에셋들을 담아 두는 이렉터리

- src : 우리 웹서비스의 주요 소스 코드들을 저장하고 관리하는 디렉터리

- App.js : 프로젝트의 루트 컴포넌트

- App.css : 루트 컴포넌트에서 사용할 스타일들을 담아 . 둔 스타일시트 파일

- index.css : 프로젝트 전반에 걸쳐 사용할 스타일들을 담아 둔 스타일시트 파일

- index.js : 루트 컴포넌트를 HTML document에 연결시켜주는 코드가 들어있는 JS파일

- gitignore : git을 사용한 소프트웨어 버전 관리에서 제외할 파일과 폴더를 적어주는 곳

- package.json : 프로젝트의 주요 정보들을 담고 있는 파일

- package-lock.json : package.json을 총해 설치된 패키지들의 상세 정보들을 담고 있는 파일

 

14. props

- 부모 컴포넌트로부터 자식 컴포넌트에 전달하는 데이터를 Props라고 부름

- 자식 컴포넌트 입장에서는 읽기 전용으로, 수정해서는 안 됨

- props를 잘 사용하면 컴포넌트의 재사용과 유연성이 크게 증가

- 부모가 전달해주는 props의 값이 바뀌면 자식 컴포넌트는 리렌더링함

- 사용 예시

function Greeting(props) {
    return <h1> 안녕 나는 {props.name}이야! <h1>
}

function App(){
    const someName = "상희"
    return (
        <div>
            <Greeting name = "상희" />	//문자를 직접 전달
            <Greeting name = {somaName} />	//변수를 전달
        </div>
    );
}

 

15. children

- 컴포넌트로 여는 태그와 닫는 태그를 만든 뒤 그사이에 값을 넣으면 그 값은 해당 컴포넌트에 children이라는 이름의 props로 전달됨

- 사용 예시

function App() {
    return <Card>안녕하세요</Card>
}

function Card(props) {
    return <div>{props.children}</div>
}

 

16. 이벤트 핸들링

- 버튼을 눌렀을 때 실행할 함수

function App(){
    const handleClickButton = () => {
        alert("버튼이 잘 눌렸어요");
    };
    
    return (
        <div className="App">
            <button onClick={handlerClickButton}>버튼1</button>
            <button onClick={() => alert("버튼이 잘 눌렸어요")}>버튼2<button>
        <div>
    )
}

 

- 이벤트 객체 

- event.target : 이벤트가 발생한 DOM요소를 참조 (아래의 input태그)

- event.target.value : 이벤트가 발생한 DOM요소가 지니고 있는 value 속성

import React, { useState } from 'react';

function TextInput(){
    const [inputValue, setInputValue] = useState('');
    
    const handleChange = (event) => {
        setInputValue(event.target.value);
        console.log(event.target.value);
    };
    
    return (
        <div>
            <input type="text" value={inputValue} onChange={handleChange} />
            <p>입력된 값: {inputValue}</p>
        </div>
    );
}

 

17.State(상태)

- 리액트 컴포넌트 내부의 동적인 데이터를 관리하는데 사용되는 데이터 구조

- 일반적으로 시간에 따라 변하는 값이나 사용자의 상호작용 또는 네트워크 응답 등에 의해 변경되는 값을 State로 관리

- State가 바뀌면 컴포넌트는 리렌더링함

- 리렌더링이 된다는 것은 함수가 재실행된다는 뜻, 결과 화면이 다르게 그려짐

- 함수는 재실행되지만 상태값은 어딘가에 계속 기억되고 있음

import react, { useState } from 'react';

function Counter(){
    const [count, setCount] = useState(0);
    
    const increment = () => {
        setCount(count+1);
    };
    
    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={increment}>증가</button>
        </div>
    );
}

 

 

[2. 회고]

props를 부모가 자식에게 내려준다면 그 자식은 자신의 자식에게 내려줄 수 있다고 한다.,, 그리거ㅗ children도 내려줄 수 있다고 했다,, 프론트 사람들한테 물어보았다.... 개어렵다,,,,,,,,,,,,, 그러나 상희는 할 수 있다 풀스택 가보자고