react 수업 정리(1일차)

[Visual Studio 사용]

 

벨로퍼트와 함께하는 모던 리액트 (참고하기 !)

https://react.vlpt.us/

 

 

▶TERMINAL git bash 설정 방법
- ctrl + shift + p
- >Terminal: Select Default Profile
- git bash 선택 후
- terminal 에서 휴지통버튼 한번 누르면 됨
(terminal 여는 단축기 : ctrl + ` )

 

▶ terminal 에서 react 폴더 설정 명령어
$ npx create-react-app first_project ( first_project  프로젝트 명)

npm error code ENOENT
npm error syscall lstat
npm error path C:\Users\user\AppData\Roaming\npm
npm error errno -4058
npm error enoent ENOENT: no such file or directo
npm error enoent This is related to npm not bein

n can be found in: C:\Users\user\AppData\Local\npm-cache\_logs\2024-06-19T00_22_45_780Z-debug-0.log
이와 같은 에러가 뜨면 npm error path 경로에 npm 폴더가 없다는 이야기 이니깐
C:\Users\user\AppData\Roaming 경로에 npm 폴더 생성하고 다시 실행

그러고 open folder 에서 react 폴더 안에 생성된 first_project 폴더로 재설정

 

▶ 리엑트 실행 명령어
-터미널에서 $ npm start   (그러면 React App 이라는 웹 창 하나 뜸)

 

src 폴더에서 

App.js   index.css   index.js

파일 3개가 중요! (수업시간에 다른 파일들은 다 지웠음)

 

컴포넌트 -> 함수 -> HTML 태그를 리턴하는 함수

컴포넌트의 파일명과 파일 안의 컴포넌트명은 대문자로 시작해야한다. (ex. Hello.js)

 

 

▶ App.js 에서  Hello.js 를 불러오는 방법

-Hello.js 최하단에서  export default Hello; (내보내기)를 해주어야 App.js에서 불러올수 있다.

- App.js에서 불러올 컴포넌트를 <Hello /> 를 입력하고 ctrl + space 눌러서 자동 완성을 해주면

   import Hello from "./component/Hello"; 가 자동으로 입력되고 사용이 가능해진다.

- <Hello /> 도 사용가능하고 <Hello></Hello> 도 동일하게 사용 가능.

 

JSX 특징
1. 태그를 열었으면 닫아야한다. <a></a>, <a />
2. 여러 태그를 리턴해야하는 경우에는 하나로 묶어야 한다.

- root <div> 안에 두개의 <div>을 넣을때는 <Fragment> 또는 <> 빈 태그 사용!

root

<div>

     <Fragment>

          <div>

               <Hello />

          </div>

          <div>

               <Hello />

          </div>

     </Fragment>

</div>

- 하지만 출력창에는 Fragment가 나타나지 않는다.

- 두개 이상의 태그를 묶을때 사용.

3. JSX 안에 값 또는 변수를 사용하려면 {}표현식을 사용해야한다.

const name = "문주영";
<h1>{name}</h1>

 

 

▶style 그리고 className

- style은 객체 형태로 작성해야 한다.

   const  fontColorRed = {
       color: "red"
     }

   <h1 style={fontColorRed}> {name} </h1>

 

- 리엑트 에서는 class를 className으로 사용

- 외부 클래스에서 파일과 클래스를 만들고 App.js에서 import 해줘야 한다.

 -> import "./App.css";

 

App.css 에서

.fs-20 {
    font-size: 20px;
}

App.js 에서
<h1 className="fs-20">{name}</h1>

 

 

▶JSX에서 주석

{/*    */}

 

 

▶컴포넌트에서는 매개변수를 props를 받는다.

- props를 그대로 받으면 사용할때 placeholder={ props.ph } disabled={ props.disabled } 처럼

  props. 을 앞에 붙혀줘야 하기 때문에  비구조화 할당을 통해 매개변수 칸에 {ph, disabled, value} 처럼 작성하여 

  placeholder={ph} disabled={disabled} value={value} 으로 쉽게 사용할 수 있다.

- App.js에서 컴포넌트를 호출하여 <CustomInput ph={"이름"} disable={true} value={"문주영"} /> 처럼

  위에 비구조할당으로 매개변수 작성한 값들을 넣을수 있음.

 

 

▶컴포넌트에 props를 지정하지 않았을 때 기본값 설정
CustomInput.defaultProps = {
    ph: "test",
    disabled: false,
    value: "빈값"
}

 

▶컴포넌트 태그 사이에 다른 태그 또는 값을 넣고 싶을때 children 사용

컴포넌트 Box
function Box({ name, children}) {
    return <div>
        <h1>{name}</h1>
        {children}
    </div>
}

App.js
<Box name={"문주영"}>
    <h2>{28}</h2>
    <h2>{28}</h2>
</Box>

 

▶조건부 렌더링
function Box({ isShow }) {
    return <div>
        {isShow ? <h3>안녕하세요</h3> : null}
    </div>
}

<Box isShow={true}></Box>

isShow 값이 true 일 때는 안녕하세요 를 출력하고
false 일 때는 null 값을 출력해야 하는데 null과 false 값은 화면에 나타나지 않는다.

const result = true && "문주영";
이면 && 또는 || 를 사용할때 true나 false가 아닌 "값"이 들어가면 true로 판단한다.
그래서 true && "문주영 은 true로 판단하고 값인 "문주영"을 result에 값을 준다.

{isShow && <h3>안녕하세요</h3>}
isShow={true} 를 하게 되면
isShow도 true 이고 뒤에 값이 들어왔기 때문에 true로 판단.
그 후 "안녕하세요" 출력됨.

(그런데 true일때 1을 출력하고 false일때 2를 출력 하고싶다면 삼항연산자 사용 해야한다.)

 

 

▶useState -> 변수 라고 생각하면됨(중요!!)
형태
 const [ num, setNum ] = useState(0);
        초기값,상태변화호출 
setNum(num + 1);    또는
setNum(num => num + 1);
(-> num을 받지 않았거나 모를때 임의로 변수를 만드는 것)
- 상태가 변화되면 함수를 다시 호출을 하고 기존 값과 바뀐 값에 대하여 랜더링 한다.
- let num2 = 0; 은 이벤트를 줘도 함수를 다시 호출하진 않기 때문에 값이 변경되어도
  리턴을 다시 해주지 않기 때문에 화면 출력엔 영향을 주지 못한다. 그리고 만약
  setNum과 같이 사용 하게 되더라도 함수를 다시 호출하기 때문에 let num2 = 0; 이
  다시 선언 되기 때문에 값이 변하지 않고 다시 0으로 돌아간다.