React.js / 01 + 02 / 기초-2

DOMADO·2024년 6월 24일

React.js

목록 보기

2/13

⚠️ 들어가기전에 . .

✅ React.js / 01 / 기초-1 도 꼭 읽어보기

🔴 React.js

-> 사용자 컴포넌트를 만들기 위한 JS 라이브러리
-> 싱글 페이지 어플리케이션 (비동기통신)

* 메인 html 1개로 고정
* 필요한 페이지들을 .js 로 만들어서 필요에 따라 갈아끼우는 방식


흐름)
App.js / Login.js / News.js 👉 index.js 👉 index.html
[각 컴포넌트 .js 파일을] 👉 [index.js로 보내고] 👉 [index.html로 표시]

✅ 컴포넌트

리액트로 만들어진 앱(웹)을 이루는 최소 단위 (≒레고 블록)
반드시 첫글자는 대문자로 작성해야한다
다른곳에서 이용할 수 있게 export 작업이 필요

rafce : 확장자 설치 후, 간편하게 함수 자동완성 단축어

[👨‍🏫] QnA ⭐

1️⃣ rafce 자동완성

Q. 최상단 import React from 'react' 유/무 차이
A. (현재 지식 기준) 그냥 놔둬도 된다.

2️⃣ JSX 규칙에 관해서 [ 必 ]

Q. 노란박스 부분, 태그 여러개인데, 변수도 썼는데 왜 JSX 규칙 안 따름?
return 밑에만, JSX 파일이고, 위에는 일반 JS 파일이라서 ?

A. 파일 자체(전부) JSX이다.
JSX 규칙은 출력태그에 해당한다.
그래서, return ( 이하에, 보통 JSX 규칙이 많이 보인다. )

위 if문의 경우, 출력태그가 ❌, 일반 로직태그라 그냥 사용가능 !

3️⃣ Q. 컴포넌트안에는 무조건 함수 ?

A. 그건 아니지만, 요즘 대부분 함수 (≒ ECMA6 변수 let)

⭐ propos

: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법
: 객체 형식으로 담겨짐

  
1) 상위 컴포넌트에서 가져올 기능(하위 컴포넌트)을 import 호출
  
  
  
2) 하위 컴포넌트명 (위의 경우) <Menu></Menu> 작성 하여 시동 
 
  
  
3) <Menu name="아메리카노" price="4100원"></Menu> 👉 전달할 값 작성
  [ name , price 임의로 적은 것 / 적고 싶은대로 가능 like 변수 ]
  
  
  
4) 하위 컴포넌트 함수 안 매개변수 🔴props 작성
  -> 상위 컴포넌트 데이터를 하위 컴포넌트로 전달하겠다.
  
  
  
5) 객체형식으로 자동으로 담겨져서 전달 됨 
  
  
6) 하위 컴포넌트에서 값 쓰려면,
  객체 형태니까 => 🔴props.키값을 이용해서 작성
  
  
  
7) 상위 컴포넌트에 반영 되어 반영