[스터디챌린지] React 기초(1)

방채원·2023년 7월 7일

React

목록 보기

1/6

주차별 목표

1주차 - 리액트 기초(1)

2주차 - 리액트 기초(2)

3주차 - 리액트 복습 및 프로젝트 기획

4주차 - 해커톤 프로젝트 기획 및 역할 분담

5주차 - 해커톤 프로젝트(1)

6주차 - 해커톤 프로젝트(2)

7주차 - 해커톤 프로젝트(3)

8주자 - 해커톤 프로젝트(4)

9주차 - 해커톤 프로젝트(5)

※ 수정될 수 있음

React

jsx 문법 사용

jsx란? : js + xml
js 내에서 <h1>, <div> 등 xml 문법 사용 가능하다.
html≠xml 이므로 문법에 주의! ex) class->className, <a herf=""> -> <Link to="">

CRA를 통한 app 만들기

create-react-app으로, npm 모듈이다. CRA를 통해서 react app을 만들어 실행시켜 보았다.
ex) 터미널 ->
app 생성 : npx create-react-app chaewon/ 생성된 app으로 이동 : cd chaewon / 실행 : npm start

Component

<html>
    <head></head>
    <body>
        <header>
            ...headerThings...
        </header>
        <main>
            ...mainThings...
        </main>
        <footer>
            ...footerThings...
        </footer>
    </body>
</html>

위의 코드는 일반적인 html 구조이다.
이런식으로 하나의 HTML파일에 header, main, footer부분까지 하나의 파일에 작성하게 된다.

<html>
  <head></head>
  <body>
      <Header/>
      <Main />
      <Footer />
  </body>
</html>

그러나 리액트는 컴포넌트 구조로 작성을 할 수 있기 때문에 각각의 부분을 분리해서 작업을 진행할 수 있다.
리액트로 작업할 경우, header부분만 프로그래밍하는 header컴포넌트, main부분만 작성하는 main컴포넌트, footer부분만 작성하는 footer컴포넌트를 만들어 작업할 수 있다.
(header, main, footer 파일 불러와 작성)

두 가지 방법 존재

Class 컴포넌트

component를 react에서 가져옴(import). component를 extends 하는 클래스 만들고 render() 함수 통해서 return

import React, {Component} from 'react';
class 클래스명 extends Component {
  render() {
  	return (<div>Hello</div>);
  }
};
export default 클래스명;

Function 컴포넌트

return(괄호 안 태그)

function FunctionComponent() {
  return (<div>Hello</div>);
}

const FunctionComponent = () => <div>Hello</div>;

render() 함수

우리가 주입한 리액트에서 불러온 Component 클래스에서 기본적으로 가지고 있는 메소드 이다.
저 메소드를 HTML코드 같아 보이는 문법을 리턴하는 형태로 작성하게 되면, 웹 브라우저에서 우리가 작성한 HTML코드를 확인할 수 있다.

react app 나타나는 원리

app.js(이외의 다른 js 파일)에 있는 함수, 클래스를 태그로 사용 가능
index.js에서 index.html로 정보 보냄 -> 웹에 내용이 보여짐
ex) home.js 에서 home 함수나 클래스 정의 -> app.js에서 <home>사용 -> index.js에서 <APP>사용 -> index.html로 보내짐 -> 웹으로 보여짐

props & state

Data handling in reactjs. props와 state는 리액트에서 다루는 데이터의 개념.
props : 받은 데이터 이거나 생성된 데이터, 즉 데이터의 기원이 자기 자신이 아닌 것
state : 자기자신의 컴포넌트에서 만들어낸 데이터
(컴포넌트 기준에 따라 state가 될 수 있고, props가 될 수 있다.)

state
현재 컴포넌트의 데이터, 컴포넌트 안에서 동적으로 생성/변경되는 데이터
```
 state ={number: 0}; //state 초깃값 설정
  render() {
    const { number } = this.state; //state 조회할 때는 this.state로 조회
   }
```
state는 객체 형태로 생성되거나, null 타입이여야만 한다. 그럼 왜 state를 사용할까?
바로, state 업데이트에는 setState라는 메소드가 사용되는데(리액트 컴포넌트에서 제공하는 메소드), 만약 setState메소드를 사용하지 않고 state property에 접근해서 값을 변경하는 경우 그 값이 실제 HTML상으로는 업데이트 되지 않게 된다.

★ setState( { 업데이트할 state property: 값 } ) 과 같은 객체 형태로 업데이트 합니다.
★ 예시
```
this.setState({
  helloMessage: 'Change'
})
```
props
컴포넌트 간 state, 메소드 전달 가능. 다른 컴포넌트에서 현재 컴포넌트로 전달 받은 데이터.
실습 : 카운터

<결과>