React란?

React란?

 

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 js 라이브러리

"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI의 구성을 돕는다.

여기서 사용자 인터페이스란, 사람들과 컴퓨터, 시스템, 기기, 도구 등 그 사이에서 일어나는 상호작용을 매개하는것인데
우리가 흔히 접하는 키보드, 마우스, 아이콘, 도움말 또한 인터페이스라고  이야기 할 수 있다.

 

앞서, React는 선언적인 라이브러리 라고 이야기 하였다.
프로그래밍에 있어서 선언적인, 혹은 선언형 프로그래밍이란 무엇일까?

 

선언형 프로그래밍

 

위키 백과에 따르면 선언형 프로그래밍이란

• 프로그램이 어떤방법으로(How) 해야 하는지를 나타내기 보다 무엇과(What)과 같은지를 설명하는 경우에  "선언형" 이라고 한다.
• 프로그램이 함수형 프로그래밍 언어, 논리형 프로그래밍 언어 등의 명령형 언어와 대비되는 프로그래밍 언어로 작성된 경우에 "선언형" 이라고 한다.

단순히 설명만 보았을때는 쉽게 이해가 가지 않는 부분이 있다.

예를 들어 설명하자면

• 명령형 방식(How): 11:30 분이 되면 핸드폰을 찾으세요. 핸드폰의 전화기 아이콘을 누르세요. 최고당 돈가스 집 번호인 031-1234-1234를 누르세요.
  상대방의 음성이 들리면 "로제돈가스 1개를 주문하겠습니다"를 말하세요.
• 선언형 방식(What): 점심으로 최고당에서 돈가스를 먹겠습니다.
  
  

이와 같이 어떻게 (How)에 대한 부분은 추상화를 하고 무엇을(What)에 초점을 맞추는 프로그래밍이 선언형 프로그래밍입니다.

 

 

<ul id="member"></ul>
<script>
var mbr = ["jk", "jh", "th", "sj", "jy"]
var elem = document.querySelector("#member");

for(let i = 0; i < mbr.length; i++) {
	var child = document.createElement("li");
    child.innerHTML = mbr[i];
    elem.appendChild(child);
}
</script>

// innerHTML은 QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML코드를 JS코드에서 변경가능
// appendChild는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.

 

const mbr = ["jk", "jh", "tk", "sj", "jy"];
return (
	<ul>
		{mbr.map((elem) => (  
    		<li>{elem}</li>
    	))}
    </ul>
);

// map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함

// 위의 코드는 아래와 같이 치환된다
const mbr = ["jk", "jh", "tk", "sj", "jy"];
return(
	<ul>
    	{mbr.map((elem) => (
        	React.createElement('li', null, `${elem}`)
        ))}
    </ul>
);

 

 

함수형 컴포넌트 VS 클래스형 컴포넌트

 

리액트 공식문서에서 말하기를 개념적으로 컴포넌트는 JS 함수와 유사하다고 한다.

"props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 

React엘리먼트를 반환한다.

리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다.

또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다고 한다.

 

함수형 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

-컴포넌트 선언이 편하다.

-클래스형보다 적은 메모리 사용

- state, lifeCycle 관련 기능사용 불가능하다. Hook을 통해 해결

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

-Class 키워드가 필요하다.
-Component로 상속을 받아야한다.
- render() 메소드가 반드시 있어햐한다.
-함수형보다 메모리 자원을 더 사용한다.

-  state, lifeCycle 관련 기능사용이 가능하다

 

 

 

둘의 차이점 중 state와 lifeCycle, Hook 에 관한 부분이 있는데  이 부분은 다음에 좀더 자세히 다루고자 한다.