[React] React 복습 (개념 ~ context API까지) (2023.05.22)

지난주부터 리액트를 배우기 시작했는데 구조와 문법, 쓰는 이유에 대하여 이해가 안되어 따로 정리한 내용!

 

1. 리액트(React)란?

리액트란, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

meta(구 facebook)에서 제공해주는 라이브러리로 주로 SPA(Single Page Application)을 만들 때 사용

React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있음

 

1-1. 기존 자바 스크립트의 단점

1) HTML과 JS가 가진 분리감 & 직관적이지만 너무 긴 자바스크립트 문법

자바스크립트에서 HTML 요소에 접근하기 위해서는 document.getElementById 등 으로 시작하는 긴 코드 작성을 통해 요소를 불러 올 수 있음

리액트는 HTML과 JS 문서를 합친 JSX 를 지원

 

2) 새 페이지를 들어갈 때마다 새로고침 > 이는 사용자가 피로감을 느끼게 함

React를 사용하면 페이지 전체를 렌더링 하지 않고 필요한 부분만 렌더링하여 SPA 구현 가능

 

2. 리액트를 사용하는 이유

2-1. Virtual DOM의 사용

실제로 DOM을 제어하지 않고 중간에 Virtual DOM 이라는 가상의 DOM을 두어 Virtual DOM이 변경될 때, 실제 DOM을 변경하도록 설계되어있음. 이러한 작업을 Reconciliation이라고 함. Virtual DOM은 불필요한 렌더링 과정의 비효율성을 최소화하기 위해 탄생. 

 

2-2. 컴포넌트 단위 개발

컴포넌트는 레고 블럭과 같이 작은 단위로 개발한것을 조립하듯이 합치는 것으로 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있음

 

2-3. JSX의 지원

JSX(JavaScript + XML)는 자바스크립트에 대한 확장 구문으로 리액트에서 생김새를 정의할 때 사용하는 문법으로 JSX는 리액트 "엘리먼트(Element)"를 생성함

HTML과 같이 생겼지만 실제로는 JavaScript  

리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환

 

JSX 문법작성 규칙

1. 꼭 닫혀있는 태그
<input />, <br /> 이런식으로 HTML에서 끝태그를 사용하지 않는 태그도 닫아주어야 함

2. 꼭 감싸져야하는 태그
두개 이상의 태그는 무조건 하나의 태그로 감싸져야 함. 
보통은 <div></div>태그로 감쌈


JSX 안에 자바스크립트 값 사용하기

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { } 으로 감싸서 보여줌
자바스크립트 문법은 return문 아래 { } 안에서 사용 가능

조건문 사용방법
1) 조건이 하나일 때 - {} 안에 && 연산자 사용
2) 조건이 두개일 때 - {} 안에 삼항연사자 (조건 ? 실행문 1 : 실행문 2)
3) 조건이 3개 이상일 때 - 조건문을 표현식이 아닌 return문 위쪽에서 사용


style과 ClassName

인라인 스타일은 객체 형태로 작성해야 하며 background-color 처럼 -로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍해줘야 함

또한, CSS Class를 설정할 때는 class= 이 아닌 className= 으로 설정 


주석 사용 : {/*     */}

function APP() {
	const name = 'react'
    const style = {
    	backgroundColor : 'black',
        color : 'aqua',
        fontSize : 24,
        padding : '1rem'
    }
	return (
    	{*/ 주석은 화면에 보이지 않습니다 */}
    	<div className='container'>
        	<div style={style}>{name}</div>
        </div>
    );
}​

 

엘리먼트(Element)
엘리먼트란 React 앱의 가장 작은 단위
엘리먼트는 화면에 표시할 내용을 기술

컴포넌트(Component)
화면에서 UI 요소를 구분할 때 사용하는 단위
자바스크립트의 함수와 유사
"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반영
컴포넌트를 만들 때 꼭 대문자로 시작! (소문자로 시작하는 HTML 태그와 구분하기 위해)
import와 export default 작업이 필수

 

3. 리액트 디렉토리 기본구조

리액트의 html(index.html)은 하나 >> SPA(Single Page Application)

App.js 안에서 내용 (JSX) 변경

 

3-1. 리액트 폴더구성 

 

node_modules : 필요한 장치들, 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더

 

public : index.html과 같은 정적인 파일 (이미지, html, json, text 등)

 

src : js, css 등 동적으로 동작하기 위해 필요한 파일들로 리액트 내부에서 작성하는 거의 모든 파일들. 이 파일들은 명령어에 따라 JS로 컴파일이 진행됨

 

.gitignore : 깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더 등을 입력

 

package.json : 프로젝트에 관련된 기본 내용(프로젝트의 이름, 버전 등)과 라이브러리 목록 포함. 라이브러리가 설치된 node_moduls 대신 package. json을 깃에 포함하여 올리게 되며 후에 누군가 프로젝트를 클론할 때 이 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치

 

README.md : 보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는곳으로 해당 저장소에 진입하면 가장 먼저 띄어짐

 

 

4. React 주요 속성

4-1. Props (Property)

상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용하는 속성

상위 컴포넌트에서 값을 입력하고, 하위 컴포넌트에서 값을 읽어옴

 

1) 상위 컴포넌트에서 Props를 지정

<ComponentName propsName="value" />

 

2) 하위 컴포넌트에서 받은 Props 값을 렌더링

function ComponentName(props){

    return(<div>{props.propsName}</div>)}

 

혹은

 

function ComponentName({propsName}){

    return(<div>{propsName}</div>)}

 

4-2. State

컴포넌트 내부에서 관리되는 변경이 가능한 데이터

리액트에서 이벤트에 의해 변경되는 동적인 값

값이 변하면 화면이 렌더링 되는 것이 특징 >> 변수와 다른점! State를 쓰는 이유

 

1) useState 선언

const [state, setState] = useState(초기값)

state : 변수명

setState : state를 변경시켜주는 함수

useState import 필요

 

2) setState(변경하고 싶은 내용) 사용

 

5. React 주요 함수

5-1. map 함수

 

 

 

자바스크립트의 표준 내장객체 중 하나로 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환. 즉, 주어진함수를 호출한 결과를 모아 새로운 함수를 만듦. 

단, 기존 배열은 영향을 받지 않음

key 값을 꼭 입력해야 함. 이때 key 값은 고유의 값이어야 함 (중복되면 안됨)

 

key값 미입력시 오류

 

let 기존함수 = [

    {key1 : value1-1, key2 : value2-1},

    {key1 : value1-2 key2 : value2-1},

    {key1 : value1-3 key2 : value2-1}

]

 

기존함수명.map((item)=>{

    <tag key="">{item.keyName}</tag>

})

 

5-2. filter 함수

 

let 함수명 = 기존함수명.filter((item)=>{item.keyName="원하는값"})