React

---

#1 Component

• react 화면의 UI를 구분할 때 사용하는 단위
• react에서 앱을 이루는 가장 작은 조각
• 새로운 component 생성 가능 & 독립적 구성으로 재사용도 가능

구성 요소

• property (pops)
  • 부모 컨포넌트에서 자식 컨포넌트에 전달되는 데이터
  • 자식 컴포넌트에서 수정 불가능
• state
  • 컴포넌트 상태를 저장하고 수정 가능한 데이터
• context
  • 부모 컨포넌트에서 생성해 모든 자식 컴포넌트에게 전달하는 데이터

종류

• 함수 컴포넌트
  • 자바스크립트의 ‘함수(function)’ 기반 컴포넌트
  • 자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고 return문에 JSX 코드를 반환
  • 또는 화살표 문법으로도 가능

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

// 화살표
const MyComponent = () => {
	return(
		<div>
			Hello React
		</div>
	);
};

Tip → VSC 환경에서 Reactjs Code snippet 라이브러리를 사용하면 컴포넌트를 편하게 생성 가능 (자동 완성)

❔ Why 함수 컴포넌트

1. Hooks
   1. Hook의 useState를 사용해 state 관리 가능
   2. useEffect를 사용해 LifeCycle을 관리
2. 직관적인 코드
   1. 자바스크립트 함수 선언, 화살표 함수 그대로 사용 ⇒ 개발자에게 직관적
3. 메모리 자원 효율
   1. 클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용

• 클래스 컴포넌트
  • class 키워드로 클래스 컴포넌트 생성
  • React.Component 상속
  • render() 메서드 필수 사용
    • 메서드 안에 JSX 리턴
  • this 키워드 사용

// 생성 
inport React, {Component} from 'react';

class MyComponent extends Component{
	render(){
		return(
			<div>
				Hello React
			</div>
		)
	}
}

---

#2 JSX

• JavaScript 확장 문법 (JavaScript + XML 추가)
• JavaScript + mark language

// JSX
function App{
	return(
		<h1>하이루</h1>
	);
}

//위와 같이 작성하면 바벨이 다음 코드(자바스크립트)로 해석해 줌
function App(){
	return React.createElement("h1", null, "하이루");
}

→ 하나의 파일에 JS와 HTML을 동시에 작성 ⇒ 편리

특징

1. 반드시 부모 요소 하나가 감싸는 형태여야 함

• 예시

  // 옳은 예
  function App() {
  	return (
  		<div>
  			<div>ex</div>
  		</div>
  	);
  }
  
  function App() {
  	return (
  		<Fragment>
  			<div>ex</div>
  		</Fragment>
  	);
  }
  
  function App() {
  	return (
  		<>
  			<div>ex</div>
  		</>
  	);
  }
  
  //틀린 예
  function App() {
  	return (
  		<div>ex</div>
  	);
  }

2. 자바스크립트 표현식
3. 내부에서는 if문, for문 대신 삼항 연산자(조건부 연산자) 사용
   a. if, for문을 사용하고자 하면 외부에서 사용해야 함

---

#3 렌더링

render 사전적 의미
→ (어떤 상태가 되게) 만들다

• React에서 렌더링은 Component가 props와 state를 통해 UI를 어떻게 구성할지 요청하는 작업을 말함
• 일반적으로 렌더링은 화면에 바로 나타나는 것처럼 표현되지만, React에서는 화면에 나타내기 전 어떤 과정을 시작하는 듯한 어조

<div id="root"></div> 

• 해당 DOM(HTML parser에 의해 생성된 트리 구조의 Node 객체 모)부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

• 기본적으로 React의 렌더링은 위 코드 과정을 거침
  • ReactDOM.createRoot()에 Element를 전달한 다음, 그 Element를 root.render()에 전달

#3-1 리렌더링

• React에서는 초기에 한 번 렌더링 진행하고 그 이후에는 특정 조건이 발생하면 다시 렌더링을 진행함 == 리렌더링
  • 내부 상태 (state) 변경 시
  • 부모에게 전달 받은 값 (pops) 변경 시
  • 중앙 상태 값 (Contaxt Value 혹은 redux store) 변경 시
  • 부모 컴포넌트가 리렌더링 되는 경우

---

#4 response.end()

response.end() 함수는 HTTP 응답을 종료함 -> 이후에 추가적인 내용을 응답으로 보낼 수 x