React 정의와 특징

 

 

 

 

 

 

react 

 

 

 

 

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

ui 즉 사용자 인터페이스를 구축하는데 사용할 수 있는 Js 라이브러리

선언형 컴포넌트 기반

 

 

 

 

절차적/ 선언적

 

 

절차적  - 원하는 결과를 만들기 위해서 어떻게 해야하는지에 중점을 두는 방식

 

: 원하는 결과를 만들기 위한 절차를 프로그래밍하는 방식 

 

ex) 택시 탈 때 : 앞으로 두 블록 하다가 우회전~ 다음 블록까지 직진~

-> 복잡, 생산성 저하

 

: 자바스크립트로 직접 DOM을 조작하는 방식 ( DOM에서 ul tag를 찾고 li 태그를 만들고 p 태그를 만들고 자식으로 추가하고 등등)

 

 

 

 

선언적  - 원하는 결과가 무엇인지 중점을 두는 방식

 

 : 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍을 원하는 방식

 

ex) 택시 탈 때 : 위코드로 가주세요

-> 단순함 -> 생산성 향상. 택시는 모든 경로를 절차적으로 생각하고 이동하는 과정을 거쳐야하지만 승객(개발자)는 이 절차를 알 필요 없움

 

개발을 하는 개발자는 최대한 절차적인 부분은 감추거나 위임하고 선언적인 부분에만 집중할 수 있음

 

: 최종적으로 원하는 상태만 선언해주면 됨

react가 알아서 처리해줌

 

 

 

virtual DOM

(react가 가지고 있는 dom)의 미니어처

 

 

react가 ui를 자동으로 업데이트 하는 과정을 효율적으로 하기 위한 개념

ui 선언시 dom 조작은 react 가 수행하는데 DOM 조작이 많아지면 브라우저가 처리해야할 연산량이 늘어남

virtual DOM 을 통해 dom 조작을 계산한 뒤 한번에 dom을 조작함으로써 브라우저가 처리해야할 연산량을 줄임

-> 성능 향상 

 

 

 

 

컴포넌트 기반

 

독립적이고 재사용할 수 있는 소프트웨어 구성 요소

독립적이고 재사용 가능한 UI 단위

컴포넌트는 레고블럭와도 같다

 

 

 

 

컴포넌트

 

독립적이고 재사용할 수 있음 -> 유지보수에 용이

컴포넌트는 다른 컴포넌트를 포함할 수 있음

(컴포넌트간 (부모-자식) 관계 가능, 조합해서 큰 컴포넌틀을 만들 수 있음)

UI가 어떻게 구성되었는지 파악하기 용이 -> 가독성 향상, 유지보수에 용이

 

 

 

 

 

 

그렇다면 컴포넌트 선언하려면? (컴포넌트를 만드려면?)

 

 

 

class component / function component

 

 

 

class component (클래스 컴포넌트)

 

 

 

state, lifeCycle 등의 기능을 사용할 수 있어서 초창기에 많이 사용

class의 문법과 동작이 복잡하다는 단점이 있음

 

 

 

 

 

function component (함수 컴포넌트)

 

class에 비해 직관적이고 사용하기 쉽지만 state, lifeCycle 등의 기능을 사용하지 못했음

하지만 hook 등장으로 위 기능들을 사용할 수 있게 됨

 

현재 react 생태계에서는 함수 컴포넌트를 많이 사용

하지만 기존에 있던 class component 이해하고 읽을 수는 있어야 함

 

 

 

 

 

jsx

-> react 에서 사용하는 자바스크립트 확장 문법

 

 

html + js 형태

html 는 마크업(태그) ->  js 에서 로직을 작성

jsx는 마크업과 로직을 한번에 작성할 수 있음

 

하지만 jsx는 js 문법은 아니기 때문에 브라우저에선 해석할 수 없음

-> jsx는 Babal라는 컴파일러를 통해 React.create.Element() 함수로 변환됨

-> 보편적으로 많이 사용

 

 

 

 

 

 

jsx 문법 특징

 

 

jsx는 js의 값을 사용할 수 있음 {} 감싸면 됨

 

 

const name = "eunji"

return <h1> hello {name} <h1>;

 

라고 넣어주면 hello eunji 라고 글자가 바뀜

 

 

// const name = "eunji" 가 아닌

const name = "bongbong"
// 로 바꾸었을 때

 

화면에

 

hello bonbong 이라고 바뀜

 

 

 

const addOne = (num) => { return num+1 ; }

return <h1> hello {addOne(1)} </h1>

 

 

화면에

 

hello2

 

라고 바뀜

 

 

💡 주의해야할 점은 jsx 안에는 js 값만 들어갈 수 있음 (if, for 문 등의 구문은 값이 아니기 때문에 jsx에서 사용할 수 없음)

변수에 담을 수 있는 값인지 아닌지 판단하면 됨!

 

 

 

 

 

 

jsx 속성 정의

 

html 보단 js에 더 가깝기 때문에 꼭 camelCase 에 맞추어서 속성명을 정의해주어야 함

예를 들어서 class 는 js에서 사용하고 있는 명이므로 className 이라는 표현을 해주어야함

 

 

 

 

jsx Event 처리

 

const introduce = () => alert ("hello world");

return <h1 className={title} onClick={introduce}>

Hello {name} </h1>

 

 

 

 

inline style

 

html 에서는 line style 부여하기 위해서 특정한 string 형태로 속성을 부여했다.

jsx에서는 객체 형식으로 부여함

 

💡 이때 주의해야할 점은 camelCase로 적어야함

 

const style = {

color : "red",

backgroundColor : "yellow"

};

 

return (

<h1 className={title}

onClick={introduce}

style={{

color:"red",

}}

// 여기서 {{}} 중괄호가 두 개가 있는데 하나는 jsx 문법이고 하나는 js 객체를 표현하는 중괄호이다.

 

 

 

 

 

 

jsx Closing

 

img input 등 닫는 태그를 무조건 해주어야함

(셀프 클로징 가능) ex) <input />

 

 

 

 

 

하나의 부모 Tag

 

 

모든 jsx 태그는 하나의 부모태그로 감싸져 있어야함

return <p></p> <p></p> 일시 그 겉을 <div> 태그로 감싸주어야 함

-> 하지만 이 방법은 비효율적! 그래서 <div> 대신 <react.Fragment> 를 쓴다 (브라우저 상 (element)에서는 보이지 않음)

 

 

 

 

 

React.Fragment

 

하나의 부모태그로 무조건 감싸주어야하는 react 특성상 모두 <div>를 걸기보단

<react.Fragment>를 쓰는데 줄여서 <> 라 쓴다