[2025 1학기 React.js 스터디] 강민지 #3주차

3주차 리액트시~~작~!

0. 리액트는 어쩌다 만들어졌을까?

"DOM 업데이트를 어떻게 해야 할 지" (X)

"Virtual DOM을 통해 처음부터 모든걸 새로 만들자" (O)

1. 리액트 컴포넌트 만들기

*컴포넌트 = UI를 구성하는 조각들

 

(1) begin-react > src > Hello.js 파일 만들기 (무조건 h는 대문자로!!)

함수형 컴포넌트(가장 많이 씀)

(2) 터미널에 npm start 입력 -> react app에 안녕하세요 출력

(3) 다른 파일에 import Hello from './Hello'; 입력 -> 불러오기 기능

• ReactDOM.render : DOM 내부에 리액트 컴포넌트를 렌더링
• 렌더링된 결과물 -> div 내부

2. JSX

babel(문법 확장 도구)이 JSX 를 JavaScript 로 변환시킴

: 브라우저는 JSX 문법을 이해 못하기 때문!

****규칙****

(1) 꼭 태그 닫기 ex. <div></div>

- 단, Self Closing 태그는 자기 혼자 닫힘! ex. <Hello /> 

 

(2) 꼭 두개 이상의 태그는 하나의 태그로 감싸기

// ERROR
function App() {
  return (
    <Hello />
    <div>안녕히계세요.</div>
  );
}

// ⭕
function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

 

(3) 불필요한 <div>없이 <>로 감싸기 -> Fragment

 

(4) JSX 안에 자바스크립트 변수 : {변수}

<div>{name}</div>

 

(5) style은 객체로, CSS 속성명은 backgroundColor처럼 camelCase로 작성

 

(6) CSS 클래스 설정 -> class=(✖️) , className=(⭕)

 

(7) 주석은 {/* 이런 형태로 */} 작성

- 중괄호{} 필수!

 

3. props(=properties)

: 부모 컴포넌트가 자식 컴포넌트에게 값 전달하기

 

(1) 부모 컴포넌트 내부에 코드 작성

app.js

(2) 자식 컴포넌트

• props.name = props 사용

3-1. 비구조화 할당 (여러 개 props 편하게 쓰기)

• props.name -> { name }
• style= 밖 {}는 jsx문법, 안 {}는 객체 리터럴

npm start

3-2. defaultProps

: props 를 지정하지 않았을 때 error 안나고 기본값 나오게 하기

• 부모 컴포넌트 내에 <Hello /> 처럼 props 지정 X
• 자식 컴포넌트에

Hello.defaultProps = {
  name: "익명"
};
// 안녕하세요 익명 출력

3-3. props.children

: 컴포넌트 태그 사이에 있는 값을 가져오기

 

(1) wrapper 태그 안에 Hello 컴포넌트 넣기

(2) Wrapper에서 props.children 렌더링하기

4. 조건부 렌더링

: 조건에 따른 결과(ex. T/F)

-props의 값이 true일 때는 ={true} 생략 가능!

• 자바스크립트값 이므로 중괄호{} 사용

• 삼항연산자 이용 -> 조건 ? A : B
• 조건이 true면 앞에 *붙어서 출력 / false면 null => 아무것도 안 나타남

**단순한 T/F 조건의 경우, && 연산자를 사용하는 것이 더 간편함!

{isSpecial && <b>*</b>}

5. useState : 컴포넌트에서 바뀌는 값 관리하기

: Hooks 기능 중 하나, 동적인 값 관리할 수 있음

 

(0) 버튼이 클릭되는 이벤트 설정하기_Counter.js

• 화살표함수 이용
• 이벤트 설정 -> on이벤트이름={실행하고싶은함수}

VS on이벤트이름={실행하고싶은함수()}

: 버튼을 만들자마자 실행됨(처음 한 번만)

 

콘솔에는 출력되지만 화면상 안보임

(1) useState (State = 동적인 값)

• 첫번째 줄 : 리액트 패키지에서 useState 함수 불러오기

const [number, setNumber] = useState(0);

- number = 현재 숫자

- setNumber = 숫자 바꾸는 도구

- useState(0) = 처음 숫자가 0 이다

• const onIncrease = ~~~~ : 배열 비구조화 할당(더 간단한 방법!)
• <h1>0</h1>   ------->>>    <h1>{number}</h1> : 동적인 값 설정

숫자가 올라간다!!!

(2) 함수형 업데이트

setNumber(number + 1)

 

↓↓↓↓↓↓↓↓↓

setNumber(prevNumber => prevNumber - 1);

 

-> 버튼을 여러 번 누를 때도 실수 없이 잘 돌아간다~!

6-1. input 상태 관리하기

: input이 바뀌면 바로 기억하게 하기!

-> 초기화 버튼 실행되게 만들기!

• onChange는 글자가 바뀔 때마다 실행되는 이벤트
• e는 이벤트 객체
• e.target = input DOM
• e.target.value = 지금 input에 입력한 값
• setText(e.target.value) = 컴퓨터한테 기억시키기
• input 태그의 value값 설정도 매우 중요!!!!★

6-2. 여러 개의 input 상태 관리하기

useState 를 여러번 사용, onChange 도 여러개 만들기 => 비효율적!!

"불변성을 지킨다"

• 객체 수정 -> inputs[name] = value; (X)\  ---> 위 사진처럼 객체 새로 만들고 변화주기~
• ...inputs : spread 문법, 기존의 input 객체 복사

 

끝~~~>....