[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 리엑트 기초2

 

Node.js

- 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임

- Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적이다. 

 

NPM

- NPM(Node Package Manager) : Node.js 패키지 관리자

- 노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있게 해준다.

- Node.js 기반 100만개 이상의 패키지(모듈)

- npx를 사용하여 다운로드하지 않고 패키지를 실행할 수 있다.

- 여러 버전의 코드 및 코드 종속성 관리가 가능하다.

- 유사한 문제와 프로젝트를 진행 중인 다른 개발자를 찾을 수 있다.

 

npm - package.json으로 패키지 관리

 

 

npx 명령어

- npm 설치 : npm install 패키지명 

- 전역 설치한 패키지는 package.json에 기록되지 않아 다시 설치할 때 어려움

- 버전을 신경 쓰지 않아도 되는 npx를 사용

 

npm 기본 명령어 실행

1. VS code 터미널에서 실행 

2. react 프로젝트 경로에서 cmd로 실행 

 

npm 기본 명령어 실행 종류

 

React 프로젝트 생성 방법

1. VS code 터미널에서 npx create-react-app 프로젝트명 으로 리액트 프로젝트 생성

2. 해당 경로로 이동하여 npm start

 

React 컴포넌트

1. 기존 MVC 패턴은 각 요소간 의존성이 높아 재사용이 어려움.

2. React 컴포넌트는 뷰를 독립적으로 구성하여 재사용 용이 

 

React 컴포넌트 구성 요소

 

 

React Hook

- 함수형 컴포넌트가 클래스형 컴포넌트 기능을 해줄 수 있게 하는 함수

 

State - useState

1. 동적으로 바뀌는 값을 관리할 때 사용되며, 상태 유지 값과 그 값을 갱신하는 함수를 반환

2. 함수 컴포넌트 내부에서 상태 업데이트 관리 

import { useState } from "react";

const[ 상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태초기값);

 

Props

1. 컴포넌트에 값을 전달하기 위해 사용

2. 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터

3. 객체 형태로 전달되며 props 이름은 동일해야 한다. 

 

Effect - useEffect

1. 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있게 하는 hook

useEffect (실행할 함수, 의존성 배열);

 

---

과제

import {useState} from 'react';
import './SignUp.css';

function SignUp(){
    const [userId, setUserId] = useState('');
    const [password, setPassword] = useState('');

    const handleIdChange = (e) => {
        setUserId(e.target.value);
    }

    const handlePasswordChange = (e) => {
        setPassword(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        if (userId == "admin" || password =="password"){
            alert("로그인 성공!");
        } else{
            alert("사용자명 또는 비밀번호가 올바르지 않습니다.");
        }

    }

    return(

        <main>
            <div className="signup-header">
                SignUp
            </div>
            <form className="signup-form" onSubmit = {handleSubmit} >
                <div className="signup-input1">
                    <input 
                        type = "text"
                        placeholder = "사용자명"
                        value = {userId}
                        onChange = {handleIdChange}
                        required
                    />
                </div>
                <div className="signup-input2">
                    <input 
                        type = "password"
                        placeholder = "비밀번호"
                        value = {password}
                        onChange = {handlePasswordChange}
                        required
                        />
                </div>
                <div className='signupsubmit'>
                    <button className='signup-btn'>submit</button>
                </div>


            </form>
            
        </main>
    )
}

export default SignUp;

 

import {useState} from 'react';



function Todo(){
    const [ tasks, setTask] = useState([]);
    const [ newTask, setNewTask ] = useState('');

    const handleTaskChange = (e) => {
        setNewTask(e.target.value);
    }

    const handleAddTask = (e) =>{
        e.preventDefault();
        setTask([...tasks, newTask]);
        //task에 있던 값에 새로 추가한 값들을 추가해서 리스트에 넣는다.
        setNewTask("");
    }

    return(
        <main>
        <div>To do List</div>
        <div>
            <input 
                type="text"
                placeholder="할 일 목록"
                value = {newTask}
                onChange={handleTaskChange}>
            </input>
            <button onClick = {handleAddTask} >추가하기</button>
        </div>
        <div>
            <ul>
                {tasks.map((task, index) => (
                    <li key ={index}>{task}</li>
                ))}
            </ul>
        </div>
        </main>

    )
}

export default Todo;

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.