리액트 기초 (ft. 코딩애플)

1. 리액트 등장배경 & 필요성

< Web App (웹앱)의 등장 >

• 모바일의 앱과 비슷한 사용성(UI, UX)을 제공하는 웹을 의미
• 새로고침없이 페이지 이동 가능 → 사용자 경험 증대 → 구매전환에 효과가 있음이 입증됨
• 이런 웹앱(SPA)을 만들기 쉽게 해주는 대표적인 라이브러리 : React, Vue, Angular이 있음
• 웹앱은 앱과 비슷하므로 앱으로 만들기 용이 : pwa, react native등을 사용하면 됨

2. 리액트 구조 & 동작방식

< Setting >

• node 설치 : node -v
• npm, npx 설치 : node 설치하면 자동적으로 설치됨 → npm -v npx -v
  • npm : node.js 기반의 라이브러리들을 설치할 수 있는 스토어 (앱스토어 느낌)
  • npx : npm처럼 완전히 설치하는 것이 아니라 프로젝트를 만들때 가장 최신의 버전을 기반으로 만드는 것
• vscode 설치

< create-react-app >

→ SPA를 만들기 위한 가장 보편적인 템플릿 (boilerplate)를 제공하는 라이브러리. (명령어 하나로 프로젝트 셋업을 끝낼 수 있음)

→ create-react-app 없이도 SPA를 만들 수 있음. 대부분의 현업에서는 create-react-app를 사용하지 않고 프로젝트에 맞는 커스터마이징을 위해 처음부터 빌드하는 경우가 많음

• folder structure
  • node_modules : 프로젝트에 필요한 모든 라이브러리들이 저장된 폴더
  • public : static(정적인) 파일들이 저장된 폴더
    • index.html : 프로젝트의 유일한 html 파일 → SPA 특징
    • robots.txt : SEO 로봇들이 해당 웹을 탐색할때 필요한 파일
    • build : 프로젝트를 배포할때 바벨을 통해 압축된 파일들이 저장됨
    • etc : favicon, image등이 저장됨
  • src : source code를 저장하는 폴더 → 주로 작업하는 폴더
    • index.js : index.html (html)과 App.js(react)를 연결시켜주는 파일 → html의 id == root인 div안에 App.js와 기타 리액트 파일들이 생성한 JS파일들을 주입시켜주는 역할을 함
      
    • app.js : 리액트의 메인 파일.
    • app.css & index.css : 각각 app.js와 index.css를 꾸며주는 css파일 BUT 생략가능
  • package.json : 설치된 모든 라이브러리들의 이름과 버전이 기록됨. → 필요한 이유 : 배포를 할 때 node_modules까지 포함될 경우 너무 무거워지므로 node_modules 없이 배포를 함. 하지만 다른 사용자의 경우 해당 node_modules가 없으면 프로젝트를 실행할 수 없으므로 이때 package.json을 사용해서 해당 프로젝트에 필요한 모든 dependencies들을 한꺼번에 다운받을 수 있음 : npm install 명령어로 설치가능
    
  • package-lock.json : 라이브러리들안에는 또 세부적인 패키지들이 들어있음. 이 세부적인 패키지들의 이름과 버전까지 기록된 파일.
  • .gitignore : git의 tracking을 받지않는 파일들을 명시하는 곳. → node_modules, build와 같은 폴더들이 주로 해당됨
    
• 프로젝트 실행 : npm start → localhost:3000 에서 웹페이지 볼 수 있음

3. JSX 문법

< JSX (JavaScript XML) >

• react 고유문법

• render안에서 사용됨

• html과 javascript가 결합된 문법 → 리액트는 js파일내에서 html문법을 사용할 수 있도록 JSX를 만듦

• JSX안에서 javascript를 사용할때는 {} 안에 작성해야함

• class가 아닌 className을 사용 → 자바스크립트의 className api를 사용하는 것

• inline style을 작성할 경우 자바스크립트 문법 + 객체를 사용 → {{ }} 안에 작성해야함

  • 속성은 - 대신 camelcase를 이용 (ex. background-color ⇒ backgroundColor)
  • 스타일 구분은 , 로 함
  • 속성값의 숫자의 디폴트 단위는 px 임
  • 속성값은 문자열 아니면 숫자로 작성됨

• 반드시 상위태그는 하나만 존재해야함

  → error message : `

  → 상위 태그가 필요없는 경우 : 태그 사용 ( <> 로 대체가능 )
  

• 데이터 바인딩이 쉬움

  • 데이터 바인딩 : 데이터를 html에 집어넣는 것 → 자바스크립트에서는 document.getElement ~~ 등 여러줄의 코드를 써야함 → 리액트에서는 변수에 저장뒤 바로 html tag사이에 {변수} 를 사용해서 집어넣을 수 있음
    

4. State

< 데이터를 저장하는 2가지 방법 >

• 변수에 저장 : 데이터가 변경이 되어도 자동적으로 리랜더링이 진행되지 않음 → 새로고침을 해야지 업데이트된 내용을 볼 수 있음
• state에 저장 : 데이터가 변경되면 자동적으로 리랜더링이 됨 → 새로고침없이 웹앱처럼 동작

⇒ 결론: 정적인 데이터는 변수에 저장, 동적인 데이터 (값이 변경되는 데이터)는 state에 저장

< state 사용방법 >

• class component
• function component

  • state를 사용하기 위해서 hook를 사용해야함 → useState (import 필요)

  • useState(초기값)는 [초기값, 값을 변경하는 함수]를 리턴함

    → destructure 문법 (es6)을 사용하여 배열에 담음
    
    → 보통 `[데이터이름, set데이터이름]` 형태로 지음
    
    → useState의 인자로는 배열, 객체등이 들어갈 수 있음

    import React, {useState} from 'react'
    
    function App() {
    	return(
    		const [count,setCount] = useState(0) // count=0, setCount는 함수
    	)
    }

5. 이벤트 리스너 적용

• DOM의 모든 노드 (element)에는 이벤트를 적용할 수 있음

< 이벤트 리스너 적용 방법 >

• addEventListener(event 종류, event 발생시 실행시킬 함수 - 콜백)
• html element의 속성으로 onEventName , 속성값으로 콜백함수 or 함수이름 주기
  • 콜백함수 : arrow function
  • 함수이름 : () 호출없이 함수이름만 !!

<이벤트 리스너를 사용해서 state값을 변경할 때 >

• state값을 변경할 때는 반드시 setState 함수를 사용해야함!!
  • setState를 사용해야지만 리랜더링이 발생하기 때문
  • setState에서는 기존의 값의 부분을 재할당할 수 없음. 통으로 대체하는 방식임

    import React, {useState} from 'react'
    
    function App() {
    	const [menu, setMenu] = useState(['icecream', 'donut', 'burger']);
    
    	return (
    		<>
    			<button onClick={() => setMenu(menu[0] = 'pizza')}>메뉴변경</button>  //불가
    			<button onClick={() => setMenu(menu = ['pizza','donut', 'burger'])}>메뉴변경</button> //가능
    		</>		
    	}
    }

6. State 변경 방법 - Deep Copy

< State를 변경하는 방법 >

1. 대체할 값을 통으로 넣기 : 위에서 언급한 방법

2. 복사본을 생성 → 수정 → setState함수에 전달하는 방법

   • Deep Copy : array, object와 값이 reference data type (참조 자료형)의 경우 복사본을 그냥 만드면 복사가 아닌 값을 공유함 → 제대로 된 복사가 일어나지 않아서 deep copy를 사용해야함
     • 방법 : es6에서는 spread operator ... 를 이용함
   • Shallow Copy : 일반적인 자료형의 경우 사용하는 방법.
     • 방법 : 새로운 변수에 할당

   let menu = ['icecream', 'burger', 'cake'];
   let coffee = 'americano';
   
   <<<< SHALLOW COPY >>>>>
   let newMenu = menu
   newMenu[0] = 'pizza'
   setMenu(newMenu)      //배열의 경우 shallow copy가 불가!! 
   
   let newCoffee = coffee;
   newCoffee = 'latte';
   setCoffee(newCoffee);   //일반적인 자료형의 경우 shallow copy 가능
   
   <<<< DEEP COPY >>>>>
   let newMenu = [...menu];
   newMenu[0] = 'pizza'
   setMenu(newMenu)       //배열의 경우 deep copy를 하면 완전히 새로운 복사본이 생김!

7. Component

< Component란? >

• 하나의 UI 단위 : 함수 or 클래스는 html 코드를 리턴 or 랜더

< Component 만드는 방법 >

• class component
• function component

< Component를 만드는 기준 >

1. 코드가 자주 반복되는 경우 → 가독성 향상. 재사용성 증가. 유지보수 용이
2. 값이 자주 변하는 UI의 경우 → 성능 향상
3. page 단위의 경우

< Component의 단점 >

• state를 넘겨주는 것이 번거로울 수 있음 → state의 경우 해당 component (함수/클래스) 안에서만 사용될 수 있으므로 다른 component에서 사용할 경우 다른 과정을 거쳐야함.