React 기초

jung_ho9 개발일지·2022년 11월 25일

React

목록 보기

2/28

https://ko.reactjs.org/

리액트 등장 배경

웹 애플리케이션의 규모가 커지면 처리해야 할 이벤트, 관리할 상태 값, DOM까 다양해지게 되면서 이에 따른 업데이트규칙이 많이 복잡해졌다. 때문에 Ember, Backbone, AngularJS 등의 프레임워크가 만들어지게 되었고 각각 작동방식은 다르지만, 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해주었다.
리액트의 경우는 어떠한 상태가 바뀌었을 때 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었다. 그렇게 되면 개발이 쉬워질 것 같지만, 모든 걸 다 날려버리고 새로 만들게 된다면 속도는 굉장히 느릴 수 밖에 없다. 하지만 리액트는 이를 Virtual DOM이라는 것을 사용해서 가능하게 했다.
Virtual DOM은 가상 DOM으로 리액트의 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링 한다. 그리고 실제 브라우저 DOM과 비교하며 차이가 있는 곳을 감지하여 실제 DOM에 패치시켜 준다.

이를 통해, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었다.

리액트 장점

선언형

리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발한다. 컴포넌트를 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.

범용성

리액트는 Javascript 프로젝트 어디에든 유연하게 적용될 수 있다. FaceBook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

JSX란?

JSX는 JavSCript XML 줄임말로 문자열도 아니고 HTML도 아닌, React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 개발할 수 있습니다. JSX를 사용하면 JavaScript 만으로 마크업형태의 코드를 작성하여 DOM에 배치할 수 있게 된다.

JSX 사용하지 않고 React 요소 생성###

return React.createElement(
	"h1",null, `Hello`
)

JSX 사용해서 React 요소 생성

return <h1>Hello</h1>

Webpack, Babel ?
리액트 프로젝트를 통해 여러 컴포넌트가 생성해 여러 파일로 분리해서 저장하게 되는데, 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 된다. 여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고, JSX 를 비롯한 새로운 문법이나 타입스크리트같이 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주기 위해서 Babel 이라는 도구를 사용한다.

JSX 문법

1. Self Closing

태그와 태그 사이에 내용이 들어가지 않을 때에는 Self Colsing 태그를 사용해야 한다.

<Hello />

2. 최상위 태그는 하나

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

<div>
	<div>
    	<h1>Hello</h1>
    </div>
</div>

Fragment 예시

<>
	<div>
    	<h1>Hello</h1>
    </div>
</>

이때 의미없는 div 태그를 생성하기 싫다면 React의 Fragment를 사용 이는 브라우저 상에 별도의 엘리먼트로 나타나지 않는다.

3. class가 아닌 className 으로 표기

<div className="greeting"> Hello!</div>

4. JavaScript 표현식 사용 시, 중괄호 ({}) 이용

JSX안에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다. 중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.

function App() {
	const name = "josh";
	
    return <div> Hello, {name} </div>
}

5. 사용자 정의 컴포넌트는 대문자로 시작

React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 한다. 소문자로 시작하게 되면 HTML 엘리먼트로 인식을 하게 된다.이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 말한다.

function Hello() {
	return <div>Hello!</div>;
}

function HelloWorld() {
	return <Hello />
}

6. 조건부 렌더링에는 삼항연산자 사용

<div> 
{ (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>}
</div>

7. 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용

map 함수를 사용할 때는 반드시 key 라는 JSX 속성을 넣어야 합니다.key JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.

functon content = posts.map((post) => 
	<div> key={post.id} >
    	<h3>{post.title}</h3>
        <p>{post.content}</p>
    </div<
);

컴포넌트란

각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 컴포넌트를 조합하여 애플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지며, 이 컴포넌트는 애플리케이션 내부적으로 근원이 되는 역할을 한다. 이 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있고 이 계층적 구조를 트리 구조로 형상화할 수 있다.