Week7(React)

이번 주부터는 '리액트를 다루는 기술'이라는 책을 바탕으로 공부한다. 기록되는 모든 내용들은 이 책을 바탕으로 작성한 것이며 중요하다고 생각이 드는 부분만을 정리할 생각이다.

 

---

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC(Model View Controller), MVW(Model View Whatever) 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다.

 

juyeop.tistory.com/23

프레임워크와 라이브러리의 차이

리액트가 프레임워크냐, 라이브러리냐라는 논쟁이 있다고 저번에 들었다.  솔직히 어디로 분류되는게 뭐가 중요한지 잘 모르겠다. 그래도 프레임워크와 라이브러리의 차이는 기억해둘만하다.

---

DOM - 문서객체모델(객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성), 잘 구조화된 문서는 DOM을 사              용 하여 트리구조를 얻어낼 수 있다.

 

일부 문서에서 "자바스크립트 엔진은 매우 빠른 반면 DOM은 느리다"라고 하는데, 이는 사실이 아니다. DOM자체는 빠르다. 하지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트한다. 이 과정에서 시간이 허비된다.

 

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

DOM 자체를 다루는 것은 까다롭다. 때문에 사용자와 DOM 사이에 Virtual DOM을 두는 것이다. 다루기 쉬운 Virtual DOM을 사용해서 다루기 어려운 DOM을 원격(?)으로 다룬다고 생각하면 좋을 것 같다.

---

component는 각각 독립된 module을 뜻하며 이는 Java, C++ 같은 OOP 언어등의 class와는 다르다. (하나의 component는 하나의 class로만 뿐만 아니라 여러 개의 class로도 작성이 가능하기 떄문이다.) component 개념을 잘 적용한 software란 부품(interface를 구현받은 class)만 바꾸어주어도 오류없이 잘 작동되는 것. (호환, 재사용에 중점을 둔 것이다.)

---

반드시 지켜줘야 하는 JSX 문법

 

• 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다. 전체를 <Fragment> </Fragment> 혹은 <> </> 로 묶어주면 된다. 후자를 사용하는 것이 훨씬 편하다.
• JSX 내부에서 자바스크립트 코드가 사용되어야 한다면 {}로 묶어서 사용하면 된다.
• JSX 내부에서 IF문은 사용이 불가능하다. 때문에 똑같은 기능을 가지는 삼항연산자로 대체한다.(삼항연산자는 분명 어딘가에 정리해놨는데 기억이 안 난다. 나중에 찾으면 이곳에 다시 기록해야겠다.)
• 어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

function App(){
	const name = undefined;
    return name || '값이 undefined입니다.';
}

//name이 undefined가 아니라면 전자가 나올 것이고 name이 undefined라면 후자가 나올 것이다.

• class가 아닌 className을 사용한다.
• 태그를 닫지 않아도 동작하는 것들이 있고 또, 그렇지 않은 것들이 있다. 그냥 보기 편하게 모두 태그를 닫아주자.