[2025 1학기 React.js 스터디] 최은희 #3주차

#1. 리액트는 어쩌다 만들어지게 되었을까?

dom을 직접 조작하면서 만든 웹앱은 규모가 커질수록 복잡해지는데,

이를 효율적으로 다루기 위해 만들어짐. 상태가 변하면 그에 맞춰 자동으로 UI가 업데이트됨.

=> 복잡한 웹 UI를 덜 복잡하고 효율적으로 만들기 위해 만들어짐!

 

#3. 리액트 컴포넌트

*컴포넌트: 화면에 보여줄 부분을 만드는 코드

(예를 들면 버튼 하나, 헤더 메뉴, 카드 하나 등...)

 

*컴포넌트를 만드는 방법

1.함수형 컴포넌트

2.클래스형 컴포넌

 

*JSM: 보기에는 html처럼 생겼지만 내부에서는 자바스크립트 코드로 변환시켜줌

 

*함수형 컴포넌트 만들기

1. scr폴더 안에 컴포넌트용 .js 파일을 새로 만든다.

2. 파일 안에 컴포넌트 코드를 작성한다.

function MyComponent() {
  return (
    <div>
      <h2>안녕하세요😊</h2>
    </div>
  );
}

export default MyComponent;

3. app.js에서 불러와서 사용한다.

 

#4.JSX

*jsx: javascript와 xml의 합성어로, 자바스크립트 안에서 html처럼 코드를 쓸 수 있게 해줌

(보기에는 html같지만 내부에서 자바스크립트 코드로 변환해줌)

 

*기본문법

1. 태그 꼭 닫기

<div></div> 혹은 /를 붙여서 닫아줘야함

2. 두 개 이상의 태그가 있을 때, 반드시 하나의 부모 태그로 감싸주기

불필요한 div태그 없이도 감쌀 수 있게, fragment 사용

3. 자바스크립트 값을 넣을 때 {}이용

4. style과 class설정 방법

-style: 객체로 써야 함. 중괄호 2개, css속성은 camelCase로 바꾸기

-clsaa: class 대신 clsaaName 사

 

*주석: {/* 이런 형태 */} 사용,  태그 내부에서는 // 이런 형태로도 주석 작성 가능

 

#5. props를 통해 컴포넌트에게 값 전달하기

*props: 컴포넌트에게 값을 전달하는 방법, 부모->자식 컴포넌트에게 데이터를 보낼 때 사용

사용법: <컴포넌트 이름 prop이름="값" />

 

*여러개의 props: 컴포넌트에 값 여러개 전달

비구조화 할당: props를 그냥 바로 꺼내서 변수처럼 사용

 

*defaultProps로 기본값 설정:

props가 안 넘어왔을 때도 안전하게 기본값을 보여주고 싶을 때 사용

함수형 컴포넌트 아래에 컴포넌트명.defaultProps = { ... }

 

*props.chilsdren:

컴포넌트 태그 안에 자식 요소(내용)을 넣으면 내용이 props.children으로 전달

제사용 가능한 레이아웃 컴포넌트를 만들 때 사용

<Wrapper>내용</Wrapper> -> "내용"을 children으로 보내는 것

props.children -> "내용"을 받는 변수처럼 생각하면 됨, 태그 안의 내용을 의미

 

+) index.js

->App.js(메인 컴포넌트)

->다른 컴포넌트들(Hello.js, Wrapper.js 등)

 

#6. 조건부 랜더링

*어떤 조건에 따라 화면에 보여줄 내용을 다르게 할 수 있음

(예시: if문 , 삼항 연산자 ? :, &&연산자)

 

*props 값 설정을 생략하면 ={true}:

-JSX에서 inSpecial은 <``` isSpecial={true} />와 같은 의미

즉, 값을 생략하면 true로 자동 설정 됨

반대로 false를 전달하고 싶을 땐 반드시 명시 필요

 

#7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기

*useState: 컴포넌트 안에서 바뀌는 값을 저장하고, 값이 바뀔 때 자동으로 화면을 다시 그려줌

 

*useState(): 상태 만들기(값을 기억하고, 변경 가능하게 함)

onClick={함수}: 버튼 클릭 이벤트 연결

set상태(새값): 상태를 바꾸고 새로 화면을 그림

set상태(prev=>prev+1): 함수형 업데이트

 

#8. input상태 관리하기

*onChange: 사용자가 입력할 때마다 실행되는 함수

e.target.value: input에 입력된 현재 값

 

#9. 여러개의 input상태 관리하기

*하나의 상태로 여러 input 관리: 객체로 상태를 만들고 각각의 필드를 관리

name 속성 필수: 어떤 필드가 바뀌었는지 알기 위해

setForm({ ...form, [name]: value }): 기존 상태 유지 + 특정 필드만 변경