[react/공부] 리액트 시작하기

React 시작하기

react 공식 페이지

 

 

---

       React? 

리액트는 작업을 더 효율적으로 하기 위해 만들어진 라이브러리인데,

큰 특징이 하나 있다.

 

변경사항이 생기면 웹 전체를 다시 구축하는 대신

가상 DOM과 컴포넌트, state를 통해 변경된 부분만 업데이트 한다.

 

가상 DOM은 실제 DOM의 가벼운 사본으로, 변경된 부분만 찾아서 실제 DOM에 반영하기 때문에,

렌더링 성능을 최적화할 수 있다.

 

 

---

       React 시작하기 

** 노드가 설치된 상태여야 함

먼저 프로젝트를 생성해준다.

그냥 리액트, 그리고 vite 두가지 방식이 있는데 후자가 훨씬 효율적이므로 그것만 정리하겠다.

 

터미널을 연 후

yarn create vite <프로젝트명> --template react

꺽쇠 없이 프로젝트명을 적어주면 된다.

 

후에 그 폴더를 vscode로 열어 터미널에

yarn dev

를 쳐주면 실시간으로 내가 만든 사이트를 확인할 수 있다.

 

 

---

       React 기본 

1) 기본 구조

2) style 적용하기

3) 함수 적용하기

4) 부모/자식 상속

5) state 활용하기

6) import/export

위 순서대로 설명하겠다.

 

 

01 기본 구조

function App() {

    //javaScript 적는 부분

    return (

    //html 적는 부분

    )
}

이런 식으로 한번에 html, javascript 그리고 다음에 설명하겠지만 style까지 포함해서 위 구조로 작성한다.

 

예시

function App() {
  //javaScript
  useEffect(() => {
    const localData = JSON.parse(localStorage.getItem('olympics')) || [];
    const sorted = localData.sort((a,b) => b[1][0] - a[1][0])
    setDatas(sorted);
  }, []);
  
  //html
  return (
    <div id='container'>
      <h1>2024 Paris Olympics</h1>
      <Form setDatas={setDatas}/>
      <List datas={datas} setDatas={setDatas}/>
    </div>
  )
}

(지금 진행하고있는 미니 개인과제 중 일부임..)

이런식으로 작성한다! html칸에는 말그대로 html이 들어가고,

그 안에서 javaScript를 쓰고자 할 때는 중괄호를 사용한다.

 

 

02 style 적용하기

//html 쓰는 부분
return (
	<div
    	style = {{ //중괄호 두개!!!
        	width: '40px' //따옴표!
            height: '40px'
        }}
    >
    </div>
)

html에 인라인으로 스타일을 적용해주는 것과 유사하다.

두가지만 유의하면 된다.

• 중괄호 두개 써주기

• 속성값에 따옴표 쓰기

 

 

03 함수 적용하기

//자바스크립트 적는 부분
function clickHandler() {
	alert('react function test')
}

//html 적는 부분
return (
	<div>
    	<button onClick={clickHandler}> </button>
    </div>
)

위에 언급했듯, javaScript를 html 칸에 적기 위해선 중괄호를 사용한다.

따라서 javaScript 칸에 적은 함수를 html 칸에 중괄호로 가져와 사용

 

 

04 부모/자식 상속

리액트는 컴포넌트로 모든 걸 쪼갠다.

어떻게 쪼갤지는 개발자 마음이다.

그 컴포넌트끼리 연결시켜주기 위해 상속을 시켜주는데,

이번엔 그걸 설명해보겠다.

아마 이번 포스트에서 설명하는 것 중 가장 복잡한 것... 이해하는데 굉장히 오래 걸림

 

우선 html을 보면 자식 부모 요소들이 있다.

그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데

파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)

그 파일들을 부모 자식 간 연결을 시켜주면 된다.

(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)

 

먼저

Mom이라는 부모 컴포넌트와

Child라는 자식 컴포넌트,
Sister라는 형제 컴포넌트가 있다고 가정해보자.

** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지

function Mom() {
	const sendToChild = 'from mom, to child'
    
    //html
    return (
    	<>
        <Child/> //자식 컴포넌트
        <Sister/> //형제 컴포넌트
        </>
    ) 
}

앞서 말했듯, html처럼 부모자식 관계이기 때문에 부모가 자기 html에 자식을 컴포넌트로 품고있음

여기서 sentToChild를 자식에게 보내기 위해선

** 자식 컴포넌트 부분

<Child sendToChild={sendToChild}/>

이때 앞에 적힌 sendToChild는 변수명으로, 바꿔도 무관하다. (<Child 변수명={sendToChild}/>)

이렇게 보내준다.

이때 자식이 이 요소를 상속 받아 사용하기 위해선

아래는 자식 컴포넌트 파일

function Child({ sendToChild }) {
	return (
    	<div>
        	{sendToChild}
        </div>
    )
}

이런식으로 받은 변수명을 괄호안에 넣어 사용한다.

자식이 부모에게 무언갈 보낼 땐 state라는 걸 사용하게 되는데 다음 챕터에서 설명하겠다.

 

 

05 state 활용하기

state란 리액트의 장점 중 '상태변화'에서 상태를 변화시키기 위한 도구다.

useState라는 걸 react에서 import해서 사용하면 된다.

파일 상단에 아래 코드를 입력하면 됨

import { useState } from 'react';

이제 사용할 준비는 완료다. useState의 기본 형태는 아래와 같다.

const [value, setValue] = useState('initial value')

여기서 useState 외의 것들은 다 변수인데,

• value : 값 (변화를 적용할 곳에 배치하여 사용)

• setValue : 변화할 값을 적는 함수 'setValue(변화할 값)' 의 형태로 사용한다.

• initial value : 초기값, 변화할 값이 없을 때 보여줄 값이다.

 

** 이걸 어디에 사용해야 하냐,

우선 setValue은 상속을 통해 input과 같은 사용자와 상호작용하여 값을 받을 곳으로 보내줘야 한다.

그리고 value는 그 값을 받아 변화될 상태를 렌더링할 곳으로 보내주어야 한다.

그래서! 그게 갈라지는 가장 아래의 부모 컴포넌트에 useState를 사용해주면 된다.

예를들어

• 할머니

• 엄마

• 나

• 오빠

• 조카

컴포넌트가 있다고 가정해보자.

값을 받을 input은 조카에게 있고, 그걸 렌더링 할 부분은 나다.

그러면 최상위 부모가 아닌 엄마에서 나눠져도 되는 거다.

플로우를 설명해보자면

엄마가 value / setValue 생성

• value : 나 에게 전달 '<Me value={value}/>' 형태

• setValue : 오빠 > 조카에게 전달 '<Brother setValue={setValue}/>' 형태로 전달, 조카도 마찬가지로 오빠가 조카에게 전달

** setValue로 변한 값은 굳이 value나 부모에게 전달해주지 않아도 실시간으로 value에 적용된다.

 

Mom.jsx

//아래 써주기 위해서는 무조건 import를 통해 자식 컴포넌트를 수입해와야 함. 다음 챕터에서 설명

function Mom() {
	const [value, setValue] = useState('초기값') //초기값 주목

	return (
    	<Me value={value}/>
        <Brother setValue={setValue}/>
    )
}

 

Brother.jsx

function Brother({ setValue }) {
	return (
    	<Nephew setValue={setValue}/>
    )
}

 

Naphew.jsx

function Nephew({ setValue }) {
	function clickHandler() {
    	setValue('value changed!') //'value changed'라는 문자열 주목
    }

	return (
    	<div>
        	<button onClick={clickHandler}></button>
        </div>
    )
}

 

Me.jsx

function Me({ value }) {
	return (
    	<div>
        	{value} //조카 컴포넌트에서 클릭하면 '초기값'에서 'value changed'로 변경
        </div>
    )
}

 

 

 

06 import / export

다른 컴포넌트를 함수나 html에 사용하기 위해서는 import를 해줘야 한다. (변수나 함수 가져와서 사용)

import, export하는 방법은 크게 두가지가 있는데,

 

1) 하나만 주고 받을 때

보내기

//파일 맨 마지막에

export default 보낼변수명

받기

//가장 상단에

import 위에서 보낸 변수명 from '위 파일 경로'

 

2) 여러개 주고 받을 때

보내기

//두 경우 모두 가장 하단에 작성

//01 객체로 묶어 전송하기
export { 변수명1, 변수명2 }

//02 각자 보내주기
//보낼 곳 앞에 export 써주기만 하면 됨
export const sample = ['wow']

받기

//파일 가장 상단에 작성
//위 두가지 경우 모두 동일

import { 변수명1, 변수명2 } from '보낸 파일 경로'

 

 

---

어제 하루종일 이거 이해하고 적용하느라 시간 다 썼다...

그래도 이거 하나 이해하니까 나머지는 수월해서 프로젝트를 금방 끝낼 수 있었음! 뿌듯하당

부모자식 상속은 다른 포스팅에 다시 써야겠다 분량이 너무 많고 중요함

내가 이해한 게 맞는진 모르겠지만, 일단 저렇게 이해하고 적용했을 때 아직까지 오륜 없었다.