HumanWater

고정 헤더 영역

글 제목

메뉴 레이어

HumanWater

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기 (18)
    • Project (2)
    • Javascript (15)
      • webpack (3)
      • React (2)
      • Algorithm (3)
      • ES6 (7)
    • Jenkins (1)

검색 레이어

HumanWater

검색 영역

컨텐츠 검색

Javascript/React

  • [React] 2) Component(컴포넌트) 사용방법

    2020.07.27 by www_dev

  • [React] 1) 리액트(React), 가상 돔(Virtual DOM)의 역할.

    2020.07.18 by www_dev

[React] 2) Component(컴포넌트) 사용방법

이제 리액트를 이용한 레이아웃 구성을 위해 필요한 Component(컴포넌트)에 대해서 알아보자. # Component 직역하자면 '구성요소' 라는 뜻을 가지고 있고, 우리가 흔하게 볼 수 있는 웹페이지들도 이러한 '구성요소'가 1개 이상으로 이루어져있다. 위 그림 같은 경우에도 [ Header ], [ Main ], [ Footer ] 라는 컴포넌트로 이루어진 웹페이지며, 이런 구조를 흔하게 다른 사이트에서도 볼 수 있을 것이다. ( 또한, 위 세개의 컴포넌트를 또 감싸고 있는 또 다른 컴포넌트를 정의해서 사용할 수도 있을 것이다. ) 그리고 [ Header ] 라는 컴포넌트 안에 로그인, 검색 이라는 기능을 있듯이, 각 컴포넌트 별로 사용자와 인터랙션이 가능한 기능들을 정의할 수도 있다. 즉, 각 컴..

Javascript/React 2020. 7. 27. 13:15

[React] 1) 리액트(React), 가상 돔(Virtual DOM)의 역할.

# React 매우 심플하게 정의하면, 페이스북에서 개발한 Javascript View(UI) 라이브러리. 사실상, 단순한 구조의 웹페이지를 만들 때는 위와 같은 Javascript 라이브러리나, 프레임워크들을 채택해서 사용할 필요는 없다. 하지만 단순 웹페이지를 넘어, 사용자와의 인터랙션(Interaction)이 자주 일어나고 무수한 웹페이지들이 서로 관계를 맺고 있는 웹어플리케이션 같은 경우, React.js / Vue.js / Angular.js 와 같은 도구를 쓴다고 한다. 그리고 현 시점에서 웹개발 - 프론트엔드 쪽에서 가장 Hot 하게 사용되어지고 있는 것이 리액트(React) 라이브러리이다. 실제 어느정도 규모감이 있는 기업의 웹사이트나, 어플리케이션 등을 보면 리액트 라이브러리를 사용하고 ..

Javascript/React 2020. 7. 18. 16:22

추가 정보

인기글

최신글

페이징

이전
1
다음
TISTORY
HumanWater © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바