WEB/React

리액트 시작하기1

dev-olive 2022. 4. 29. 17:02

리액트 입문

인강들으면서 필요한 부분 및 복습하고자 하는 부분만 작성한 것이기에 전체 내용을 알고 싶으면 인강 수강 권장
최대한 쉬운 표현을 사용하려고 한다.

리액트 입문 독학하면서 느낀 점

  • 인강 수강하면 훨씬 이해가 빠르다.
  • 리액트 가이드문서 읽으면 좋긴한데, 구버전이라 초보는 참고하기 어려울 수 있다.
  • 인강 수강하고-> To do app 등 기초 앱 제작을 따라하는 것도 좋다.
  • 개인 프로젝트 아무거나 하면서 체득하자
  • 기타 참고 자료는 업데이트 할 예정

개발환경 setting

download plz

  • nodejs
  • vsc

시작하기

작업용 폴더 생성 후 해당 폴더에 npx create-react-app [프로젝트명] 으로 프로젝트 생성해준다. vsc 에서 file-open folder 후 [프로젝트명] 폴더 선택하고 작업시작할 수 있다. App.js에서 메인 개발을 하고 이후 필요하면 js파일 추가하면서 하면된다.

npm start로 미리보기 가능

안될 때

  • 'npmx command not found ~' -> nodejs 설치 (제대로) 안해서 생기는 issue일 가능성 높음(or version issue) 그냥 최신 nodejs 설치해서 사용하자
  • [mac] permission error -> sudo npx create-react-app [프로젝트명]으로 하자
  • 이외는 구글링하면 해결책이 대체로 나옴

구버전 리액트는 잘 모름...

JSX

JSX를 사용하고 있어서 class명을 넣을 때 className=""을 사용한다.

html에 변수를 넣고 싶을 때는

<div>{var}</div>

로 사용(바인딩)한다.

html에 직접 style 속성을 넣고 싶을 경우

<!-- 이 코드를 넣고 싶다면 -->
<div style="color: blue"></div> 

<!-- 아래처럼 넣어준다 -->
<div style={{color:'blue', fontSize:'30px'}}></div>

<!--
- 대시기호(-) 사용 불가
- 모든 단어 붙여쓰고 붙였을 때 앞글자를 대문자로 치환
- (예: font-size -> fontSize)
-->

그 외 JSX 문법은 구글링하거나 JSX 소개 를 참고하면 좋다.

State

변수말고 state를 활용하자

let [title, setTitle] = useState('This is a post title');

라고 작성하면

title에 This is a post tile이라는 값이 setting 된 것이다. (useState 사용 전 import해주기 import { useState } from 'react')

title에 여러 데이터를 넣고 싶다면 array형식으로 넣을 수 있다.

let [title, setTitle] = useState(['title1', 'title2', 'title3']);

title[0]; // 'title1'
title[2]; // 'title3'

state는 변동사항이 생기면 자동으로 재렌더링(re-rendering)해주기 때문에 vanilla js(쌩 js)를 사용할 때보다 훨씬 편리해진다. (변경 사항 적용에 유리)

어떤 변수를 state로 만들어두고 활용하는 게 좋을까?

바뀌지 않는 데이터들은 state에 저장할 필요가 없음. state의 장점은 리렌더링인데 바뀔 일이 없다면 굳이 사용할 필요 없다.

이벤트 처리하기

<!-- 일반 html에서는 -->
<div onclick="blah blah js"></div>

<!-- JSX에서는 -->
function testFunc(){
    console.log('This is test func');
}
...
<div onClick={testfunc}></div>

함수를 onClick 안에서 직접 만들어도 무관하다.

<div onClick={ () => {code code blah blah} }>

state 변경하려면

setTitle(newState) 를 사용한다. state변경 시 state변경 함수를 쓰지 않을 경우 리렌더링이 되지 않는다.

let [testState, settestState] = useState(0);
// div를 클릭할 때마다 testState값을 1씩 증가시키려면 
<div onClick={ ()=>{settestState(testState+1)} }></div>

array 변경 시 다음과 같다.

let [title, setTitle] = useState(['title1', 'title2', 'title3']);

function arrayChange(){
    //state 전체를 변경해 주어야 하기 때문에 전체 array를 다시 셋팅해주어야 한다.
    setTitle(['changedTitle1', 'title2', 'title3']);   
}
...
<div onClick={ arrayChange }></div>

위 방식은 비효율적이니까 아래 방법도 있다. state 변경 시 원본은 건들지 않고 사본을 만들어 수정하는 것을 원칙으로 한다.

function arrayChange(){
    let copyTitle = [...title];
    copyTitle[0] = 'changedTitle1';
    setTitle(copyTitle);
}

사본을 만들 때 [...array]하는 이유는 깊은복사를 구글링하거나 [JavaScript] 깊은 복사, 얕은 복사 (출처 : https://bbangson.tistory.com/78) 를 참고