분류 전체보기
-
[Redux] 리덕스란?카테고리 없음 2020. 3. 12. 22:01
* 왜 리덕스를 사용하는가 버스 하차 벨을 생각해보자. 버튼을 누르면 삐- 소리가 나면서 동시에 버스 내에 있는 모든 벨에 빨간 불이 들어온다. 버튼을 한 번 눌렀는데, 모든 벨의 색깔이 변화하는 것이다. 버스 하차벨처럼 한 칸의 버튼을 클릭하면 나머지 칸의 색이 따라 바뀌는 화면은 어떻게 만들 수 있을까? 먼저 '빨강' 버튼을 누르면 모든 화면이 빨갛게 변하는 화면을 생각해보자. 먼저 (1) 'red' 자신의 색을 빨갛게 바꾸는 코드, (2) 'green'의 색을 빨갛게 만드는 코드, (3) 마지막으로 'blue' 의 색을 빨갛게 바꾸는 코드가 필요하다. 총 세 번의 코딩을 해야 한다. 마찬가지로 모든 칸을 초록으로 만들 때도 세 번, 모든 칸을 파랗게 만들 때도 세 번의 코드작업이 필요하다. 위 화면..
-
[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 ..