React #1

리액트 공부 시이작!!!!!!!!🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

👉 Point

✅ React란?

• 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다.
• 특징
  • JSX 문법
    • 자바스크립트 안에서 HTML 문법을 사용해서 VIEW를 구성할 수 있게 도와주는 자바스크립트 문법.
  • Component 기반
    • 기존에 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고, 집어넣고 하는 것이 아닌 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜준다.
  • Virtual DOM
    • 기존의 HTML DOM은 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 처음부터 다시 생성하지만, 리액트는 가상돔을 사용하여 시야에 보이는 부분을 수정해준 뒤, 모든 업데이트가 끝나면 일괄로 합쳐 실제 DOM 에 던져준다고한다. 또, 가상DOM은 바뀌지 않은 부분과 바뀐 부분을 자도으로 감지해서 한번에 업데이트 시켜준다. 즉, 최적화된 렌더트리가 가능하다!

✅ JSX란?

• JavaScript XML 의 줄임말.
• JSX라 하며 JavaScript를 확장한 문법,
  UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장
• '바벨'을 사용하여 일반 자바스크립크 형태의 코드로 변환해주어야한다.
• 문법
  • 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
    • 부모요소는 무조건 하나여야한다. 대부분 <div></div>, <Fragment></Fragment>,<></> 를 사용하여 감싼다.
  • 2. JavaScript 문법을 사용하려면 {} 안에 작성한다.
    • JSX 안에서도 자바스크립트 표현식을 사용할 수는 있지만, 꼭 JSX 내부에서 자바스크립트 코드를 {} 안에 감싸주어야한다.
  • 3. if, for문 대신 삼항연산자를 사용해야한다.
    • if와for는 JS 표현식이 아니므로 JSX 내부에서 사용할 수 없다. 따라, JSX 주변에서 if문을 사용하거나 {} 안에서 삼항연산자를 사용해주면된다.
  • 4. 카멜표기법(camelCase)을 사용해야한다.
    • JSX 에서 자바스크립트 문법을 사용하려면 코드를 {} 로 감싸야하므로 스타일 적용시에도 객체 형태로 넣어주어야 한다. (ex: font-size → fontSize ...)

✅ 컴포넌트란?

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 컴포넌트는 데이터(props)를 입력받아 view(state)상태에 따라 DOM NODE를 출력하는 함수이다.
• 컴포넌트 이름은 꼭! 대문자로 시작해야한다.
  (리액트는 소문자로 시작하는 컴포넌트를 dom 태그로 취급하기 때문에)
• 함수형 컴포넌트, 클래스형 컴포넌트가 있다.

// ex1)

import React form 'react';

function Title() {
	retrun <div>WECOME REACT!!!</div>
};

export default Title; //다른 파일에서 불러올 수 있도록 내보내주기

function Main() {
	retrun <div>이것은 내용이다~</div>
};

export default Main; 

function Footer() {
	retrun <div>bye bye :)</div>
};

• App.js 에서 위에서 적은 컴포넌트를 조합해주는건 < '이름' /> 와 같이 작성해주면된다.

function App() {
	return (
    	<div>
        	<Title />
            <Main />
            <Footer />
        </div>    
    );
}

• 결과
  WECOME REACT!!!
  이것은 내용이다~
  bye bye :)

✅ State란?

• props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다
• 즉, 둘다 일반 자바스크립트 객체이며, prop은 컴포넌트에 매개변수처럼 전달하는 것, state는 컴포넌트 안에서 사용되는 것.
• '현재 상태에 대한 데이터를 보관하는 곳'이랄까.
• 사용방법, 예제

function App() {
	cosnt [value, setValue] = useState(0);
    // value : 우리가 담으려는 data 값
    // setValue : data 값을 바꿀때 사용할 modifier
    // useState(0) : ()괄호안에 초기값을 설정할 수 있다.
    //               현재는 0으로 설정한 것
	return (
		<div>
        	<h3>Total Clicks : {value}</h3>
			<button>Click me</button>
        </div>
	)
}

• 결과
  Total Clicks : 0
  Click me
• modifier(원하는 변경값, 함수) 를 넣으면 업데이트 및 자동적으로 reRender이 된다.

🚩 JSX : https://ko.reactjs.org/docs/introducing-jsx.html