1. Why React?🧐
React =
JavaScript 라이브러리 for 사용자 인터페이스(UI)+ 가상돔(불필요한 랜더링 없에고 성능 향상)
리액트는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유는 UI를 자동으로 업데이트 해준다는 점이다. 리액트는 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다. 또한 리액트는 프레임워크가 아닌 라이브러리이기 때문에 다른 프레임워크와 함께 사용할 수 있다.
현실적인? 이유로는 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, react native의 사용으로 인해 사용자가 꾸준히 증가이다. 즉, 지속적인 관리가 되며 많은 사람들이 사용하기 때문에 방대한 자료들에 쉽게 접근할 수 있다.
또한 리액트의 컴포넌트는 가독성, 재사용성을 높여 유지보수를 쉽게 만들어 준다. 효과적으로 웹 어플리케이션을 제작할 수 있고, 개인 컴포넌트를 만드는 것 뿐만이 아닌 타인이 만든 수많은 컴포넌트도 사용할 수 있다.
2. JSX(JavaScript XML)
const hi = <p>Hi</p>;위의 문법은 자바스크립트의 확장버전인 JSX(syntax extension for JavaScript)이다. HTML과 유사하게 생겼으며 자바스크립트 파일 내에서 작성할 수 있다.
하지만 자바스크립트 문법과는 다르기 때문에 .js파일내에 JSX문법이 있으면 브라우저가 해석하지 못해 오류가 난다. React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.
2-1. JSX element
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};위에 보이는 코드처럼 자바스크립트 코드 내부에 HTML문법을 써주면 그것이 JSX다. .js파일 어디서나 필요한 곳에 작성할 수 있다. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수 도 있다.
2-2. JSX attribute
태그에 attribute(속성)을 주고 싶을 때는 항상 ""쌍따옴표로 감싸줘야 한다. attribute를 추가하고 싶을때는 HTML에서 쓰는 attribute name(속성명)과 다를 수있어 react 공식문서를 참고해야 한다.
가장 대표적인 예로 class를 주고 싶을 때는 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.
2-3. Self-Closing Tag
JSX에서는 어떤 태그라도 self closing tag가 가능하다. input과 같이 하나의 태그가 요소인 경우에는 <input />과 같이 항상 /로 끝내줘야 한다.
div /와 <div>``</div>는 같은 표현이다.
JSX 특징
- 모든 요소를 감싸는 최상위 요소가 있어야 한다. => 항상 하나의 태그로 시작
(cf. React Fragments :<> ... </>) - 자바스크립트로 표현한다. : { ... javascript... }
class가 아닌className이라 적는다.- Inline Styling :
<div style={{color : "red"}}>Hello React</div> - Self Closing tag :
<div></div>=<div />
2-4. Nexted JSX
- (필수!)중첩된 요소를 만들려면 무조건
()소괄호로 감싸야 한다.
const good = (
<div>
<p>hi</p>
</div>
);- (필수!)항상 하나의 태그로 시작한다.
const wrong = (
<p>list1</p>
<p>list2</p>
);//eror위에 코드처럼 처음 요소가 sibling이면 안되고, 무조건 하나의 태그로 감싸야 한다.
const right = (
<div>
<p>list1</p>
<p>list2</p>
</div> //good!
);2-5. Rendering
사전적 의미 : rendering = 구현
html요소(element), 또는 React요소 등의 코드가 눈으로 볼 수 있도록 그려지는, 구현되는 것을 렌더링이라고 한다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용해야 한다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.
작성 필수 요소
- 소괄호 감싸기
- 항상 하나의 태그로 시작
- 랜더링 = ReactDOM.render
componet = 재사용 가능한 UI단위
컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있습니다. 하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있습니다.
React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return됩니다.
함수로 컴포넌트 만들기
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}Class로 컴포넌트 만들기
class로 컴포넌트를 만드려면 React.Component 를 extend해서 생성합니다. 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야하고, return도 해주어야 합니다. render() 메서드는 무조건 정의해야한다는 말은, component를 만들 때 필요한 메서드가 원래 더 있다는 말입니다. 그런데 그 중에서 render() 만 필수입니다.
class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}오늘의 한줄 ✏️
리액트를 시작하는데 처음에 지레 겁먹었던 것보다 흥미로운 부분이 많았다.
앞으로 컴포넌트를 활용하여 더욱 가독성, 재사용성을 보완해야겠다.
물론 틈틈이 Js공부도 유지하면서...React.js 즉, js기반이니까!
참고
