리액트와 컴포넌트

리액트는 유저인터페이스를 만드는 자바스크립트 라이브러리이다 

 

HTML, CSS, JAVASCRIPT로도 사용자 인터페이스를 만들수 있지만 

리액트를 사용함으로써 사용자 인터페이스를 만드는 과정을 단순화 시킬수 있다 

 

리액트가 없더라도 어떤 웹 사이트를 만들수 있다 

 

하지만 리액트가 있다면 작업 과정이 훨씬 수월해진다 

 

사소한 사항에 대해 신경 쓸 필요가 없어지며 

에러도 덜나고 

무엇보다 비지니스 로직에 더욱 집중 할수 있다 

 

그래서 리액트와 같은 라이브러리를 사용하는것이다 

 

작업을 단순화 하기 위해 리액트에는 컴포넌트라는 개념이 있다 

 

컴포넌트 = 레고블록

왜 리액트에서 컴포넌트가 중요한 개념일까?

 

그 이유는 모든 사용자 인터페이스가 컴포넌트로 구성되어 있기 때문이다

 

그 컴포넌트가 무엇인지에 따라 사용자 인터페이스가 달라질수 있다 

 

모든 종류의 웹 앱에 있는 사용자 인터페이스는 컴포넌트로 나눠져있다 

 

사용자 컴포넌트를 만들수 있으며 컴포넌트들을 구성하여 앱을 만든다 

 

왜 컴포넌트를 사용하나?

 

바로 재사용성 때문이다 

 

또한 코드를 작고 관리 하기쉬운 규모로 유지 할수 있다 

 

HTML + CSS + JAVASCRIPT를 묶어 컴포넌트를 만든다 

그중에서 중요한것은 HTML과 자바스크립트다 

물론 CSS를 추가 할수도 있지만 중요한것은 아니다 

 

정리 하자면 

 

리액트는 컴포넌트로 구성되고 

모든걸 합쳐서 컴포넌트를 만들수 있다 

리액트로 재사용 할수 있고 반응 하는 컴포넌트를 만들수 있다 

컴포넌트는 HTML과 자바스크립트와 CSS로 구성된다 

 

리액트는 선언 접근 방식이라는것을 사용한다 

그 방식으로 컴포넌트를 만든다 

 

리액트에게 특정 HTML요소가 사용자 인터페이스의 특정 장소에 만들어 지고 삽입 되도록 할수없다 

 

단 바닐라 자바스크립트로는 할수있다 

 

리액트 대신에 최종 상태를 결정하게 된다 

 

타겟 상태이거나 가능한 다른 타겟 상태일수있다 

 

그때 리액트가 하는 일은 웹 페이지의 어떤 요소가 추가 되거나 제거 되거나 업데이트 되는지 정하는것이다 

그러므로 리액트로 최종 상태만 정의 하면 된다 

 

그럼 최종 상태가 사용될것이다 

 

https://youtu.be/BYbgopx44vo