리액트
-
[React] props, state카테고리 없음 2020. 3. 2. 19:44
*props 아래와 같이 Subject 라는 컴포넌트를 만들었다. 이제 Subject 라는 컴포넌트를 자유롭게 사용할 수 있을 것이다. // 컴포넌트를 정의하고 class Subject extends Component { render(){ return ( WEB world wide web! ); } } // 요렇게 사용하면 됨 하지만 조금 더 욕심을 내볼 수 있다. Subject 내부의 내용이 꼭 'WEB' 이라던가 'world wide web!' 이라는 고정값을 가져야 할까? 사용할 때마다 동적으로 내용을 바꿔서 쓸 수 있다면 훨씬 효율적으로 이용할 수 있지 않을까? HTML DOM에서는 '속성'을 사용해 태그에 개별적인 성격을 부여한다. 리액트DOM에서도 이와 유사한 방법을 이용해 컴포넌트 사용 시 ..
-
[React] 엘리먼트카테고리 없음 2020. 3. 2. 19:10
* 엘리먼트 리액트 공식문서는 엘리먼트를 '리액트 앱의 가장 작은 단위' 라고 표현하고 있다. 엘리먼트는 화면에 표시할 내용을 기술하는데, 브라우저 DOM 엘리먼트와는 달리 리액트 엘리먼트는 일반 객체다. 리액트 DOM은 리액트와 일치하도록 DOM을 업데이트한다. const element = Hello, world; HTML파일 어딘가에 "root" 라는 id를 가지고 있는 엘리먼트가 있다고 가정하자. 이 안에 들어가는 모든 엘리먼트들을 React DOM 에서 관리하기 때문에 이를 '루트 DOM 노드' 라고 부른다. 리액트 엘리먼트를 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다. function tick() { const element = ( Hello, world! It ..
-
[React] 리액트 소개, 컴포넌트, JSX카테고리 없음 2020. 3. 2. 17:53
*리액트(React) 웹사이트에 넣을 수 있는 정보량이 많아지면 웹사이트는 빠른 속도로 복잡해진다. 이것은 무엇을 의미할까. 사이트 내 HTML 태그가 정보량과 함께 기하급수적으로 늘어난다는 것을 의미한다. 당장 페이스북에 들어가서 개발자도구를 켜보면 엄청난 양의 HTML태그가 있는 것을 확인할 수 있다. 말하자면 HTML태그를 효율적으로 관리할 수 있는 방법이 필요해지는 것이다. 만약 내가 반복해서 사용하는 HTML 태그를 한 덩어리에 담아 사용할 수 있다면 어떻게 될까. 말하자면 '사용자 정의 태그'를 만들어주는 것이다. 이 사용자 정의 태그를 사용하면 동일한 작업을 반복하지 않아도 될 뿐만 아니라(재사용성), 가독성이 좋아진다. 뿐만 아니라, 유지보수 또한 엄청나게 편해질 것이다. 리액트(React..