Why React?
React는 페이스북의 UI를 더 잘 만들기 위해서 페이스북에서 만든 JS UI 라이브러리로,
복잡한 웹앱에서 데이터와 화면 일치 문제를 해결하기 위해서 사용한다.
JSX(JavaScript XML)
- HTML과 비슷하게 생겼으며 javascript 파일 내에서 작성할 수 있다.
- JSX는 원래의 JavsScript 문법이 아니기 때문에, js파일 내에 JSX문법이 있으면 브라우저에서 해석하지 못한다.(문법 오류남)
따라서 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.
JSX element
HTML 문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX이다.
변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>};JSX attribute 특징
- 태그에 속성(attribute)을 주고 싶을 때는 항상 “” 쌍따옴표로 감싸야한다.
React에서의 속성명은 실제 HTML에서 쓰는 속성명과 다를 수 있으니 공식 문서를 참고해야한다.
ex) html에서 class를 줄 때는 원래 속성명은 class이지만 JSX에서는 className을 사용한다.
const hi = <input readOnly={true} />;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>};
Self-Closing Tag
-
JSX에서는 모든 태그에서 self closing tag이 가능하다.
대부분의 HTML요소들은 2태그를 사용한다. (오프닝 태그 < div >, 클로징 태그 < /div >)하지만 JSX에서는 < img >, < input >같은 몇몇의 html요소들은 한 태그만 사용한다.
이런 태그들을 단일 태그, self-closing tag라고 부르는데,
html에서는 self-closing tag를 사용할 때, 마지막 > 전에 /를 포함하는 것은 선택 사항이다.하지만 react에서는 반드시 /를 포함시켜야 한다.
// Fine in JSX <br/> //NOT FINE AT ALL in JSX <br>
Nested JSX
중첩된 JSX (태그 안에 태그)
- 중첩된 요소를 만드려면 소괄호 ()로 감싸야한다.
const good = (
<div>
<p>hi</p>
</div>
);// 아래와 같이 제일 처음 요소가 sibling이면 안된다. 무조건 하나의 태그로 감싸져야 한다.
const wrong = (
<p>list1</p><p>list</p>)
// 아래와 같이 첫 요소는 하나의 태그로 감싸줘야한다.(가장 바깥쪽 요소가 정확히 1개여야 한다.)
const wrong = (
<div>
<p>list1</p>
<p>list</p>
</div>
);
JSX의 첫번째 여는 태그와 마지막 닫는 태그는 동일한 JSX요소에 속해야한다.
JSX표현식에 외부 요소가 여러개 있으면 < div > < /div >로 래핑한다.
//틀린표현
const paragraphs = (
<p> I am a paragraph.</p>
<p> I, too, am a paragraph</p>
);
//맞는 표현
const paragraphs = (
<div id= "i-am-the=outermost-element">
<p> I am a paragraph.</p>
<p> I, too, am a paragraph</p>
</div>
);Component
리액트는 화면의 한 부분을 컴포넌트라는 단위로 나누어서 관리할 수 있다.
컴포넌트를 사용하면 역할과 기능에 따라 따로 관리하기 용이하며,
반복되는 부분을 공통적인 부분으로 분리하여 재사용성을 높일 수 있다.
재사용 가능한 UI 단위로 함수와 비슷하다.
함수도 기능이 독립적이고 한번 선언해두면 필요할 때 마다 호출하며 재사용할 수 있는 것 처럼,
컴포넌트도 함수처럼 input을 받아서 return할 수 있다.
React 컴포넌트에서는 input을 props라고 하고, return은 화면에 보여져야 할 React요소가 return된다.
컴포넌트는 데이터와 화면을 하나로 묶어둔 덩어리!
Component 만들기
React에서는 컴포넌트를 class나 함수형으로 선언할 수 있다.
때에 따라 함수로 만드는게 좋을 때가 있고, class로 만드는게 좋을 때가 있다.
class형 컴포넌트는 거의 사용하지 않지만, 사용하는 기업들이 있으므로 그 프로젝트의 유지보수를
위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다.
함수로 Welcome 컴포넌트 구현하기
function Welcome(props) {
return <h1> Hello, {props.name}</h1>;
}Class로 Welcome 컴포넌트 구현하기
- class로 컴포넌트를 만드려면 React.Compmnent를 extends해서 생성해야한다.
- 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야하고, return도 해주어야한다.
class Welcome extends React.Componnent {
render() {
return <h1>Hello, {this.props.name}</hi>;
}
}component 사용
-
컴포넌트는 함수 이름 or class 이름으로 사용할 수 있다.
-
태그처럼 < Welcom/ > 으로 작성한다.
-
정의한 컴포넌트를 사용할 때, 원하는 property를 얼마든지 추가할 수 있다.
그러면 Welcome 컴포넌트(함수)에서 매개변수/인자 (parameter)로 해당 property(동적인 속성)를 받을 수 있는데, 이것을 props라고 한다.(props는 property의 줄임말이다)
property는 HTML DOM 에서 동적인 속성을 의미한다.
-
.(dot)으로 property명에 접근이 가능하고, props.속성명 으로 속성 값을 가져올 수 있다.
React-dom 라이브러리를 ReactDom 을 사용해 render라는 함수를 실행한다.
ReactDOM.render(element, container[, callback])
// 1. Welcome 컴포넌트 정의
function welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Welcome name="wecoder"/>
<Welcome name="John"/>
<Welcome name="Sara"/>
</div>
);
}
ReactDOM.render(<App/>,document.getElementById("root"));
//ReactDOM~은 컴포넌트들을 실시간으로 동적으로 웹상에 출력시켜 준다.
//App이 컴포넌트, document.getElementById("root")가 렌더 시킬 위치.렌더 시킬 위치의 id값을 가져온다.
//index.js에 있는 부분(index.js는 중간 다리 역할)ReactDOM
ReactDOM은 Javascript 라이브러리의 이름으로, JSX를 렌더링하는 가장 일반적인 방법이다.
JSX 표현식을 사용해서 DOM노드의 해당 트리를 만들고, 해당 트리를 DOM에 추가한다.
이것이 JSX표현식이 화면에 나타나도록 하는 방법이다.
ReactDOM 라이브러리는 여러가지 React 관련 메서드가 포함되어 있으며, 어떤 방식으로든 DOM을 처리한다.
import React from 'react';
import ReactDOM from 'react-dom"; //react-dom 라이브러리 import
// 작성한 jsx 렌더해서 screen에 나오게
// ReactDOM.render = ReactDOM.createRoot (18버전 이후에는 ReactDOM.createRoot를 사용해야 에러 발생x)
// ReactDOM.render()의 첫 번째 인수는 JSX 표현식이어야 하며 화면에 렌더링된다.
//<h1>Helloworld</h1>은 ReactDOM.render()에 전달되는 첫 번째 인수
const root = ReactDOM.createRoot(
<h1>Helloworld</h1>,
document.getElemtById('app')
);import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
ReactDOM.createRoot(<span id="container">Render me!</span>, document.getElementById('container'));
//id를 "container"로 바꿔줬으니까 document.getElementById의 id값도 바꿔준다.ReactDOM.render()에 변수 전달
ReactDOM.render()의 첫번째 인수는 JSX 표현식으로 작성 되어야 하지만, 변수가 JSX표현식일 필요는 없다.
즉, 변수의 값이 JSX 표현식으로 작성되어있는 한, 첫번째 인수는 JSX표현식이 아닌 변수가 될 수 있다.
아래의 예에서는 JSX표현식을 toDoList라는 변수로 저장하며, ReactDOM.render()의 첫번째 인수로 toDoList를 전달한다.
const toDoList=(
<ol>
<li>Learn React</li>
<li>Become a Developer</li>
</ol>
);
ReactDOM.createRoot(
todolist, document.getElementById('app')
)가상 DOM
ReactDOM.render()의 특별한 점은 변경된 DOM요소만 업데이트한다는 것이다.
즉, 똑같은 것을 연속으로 두 번 렌더링하면 두 번째 렌더링은 아무 작업도 수행하지 않는다.
const hello = <h1>Hello world</h1>;
//This will add "Hello world" to the screen
ReactDOM.createRoot(hello, document.getElementById('app'));
//This won't do anything at all
ReactDOM.createRoot(hello, document.getElementById('app'));
