Jay

JSX에서 CSS스타일과 class를 사용하는 방법에 대해서 알아보자. 기본에 일반 html을 입력할 때는 문자열로 넣어주게 된다. 밑에는 class를 넣어주고 css를 통해 선언해서 색상은 초록색인 class를 적용해 주었다. BLUE GREEN .green { background: green; padding: 1rem; color: white; } 리액트에서는 어떻게 다를까? 일단은 스타일을 사용할 때 객체형태로 넣어준다. 그리고 Camelcase를 사용한다. 즉 새로운 단어가 시작될 때마다 대문자를 사용하는 것이다. 그리고 자바스크립트 상으로 스타일을 입력하는 거라서 js코드를 입력해도 된다. 아래 코드를 보자. import React, { Component } from 'react'; class ..

JSX에 문법에 대해서 알아보자. JSX는 Html같지만 JavaScript로 변환이 된다. 리액트 컴포넌트를 사용할 때 사용하는 문법이다. Html이랑 비슷하지만 지겨야 할 규칙이 몇 가지가 있다. 살펴보자. 첫번째 태그는 꼭 닫혀 있어야 한다. 즉 div태그 열었으면 /div 닫아줘야 한다는 것이다. 아래와 같이 코드를 작성하면 오류가 난다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } 아래와 같이 input text 뒤에 /를 붙엿 작성하게 되면 오류가 나지 않는다. 언제나 꼭 닫아줘야 한다. 즉 self closing tag를 통해서 한번 연 태그를 그자리에서 닫는다..

Webpack은 code들을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어 낸다. 프로젝트를 만들 때 파일 하나하나 만든 것들을 일일히 html상에서 불러오는 것이 아니라, 예를 들어 js파일에서 png를 사용하겠다 그러면 import라는 구문으로 불러올 수가 있는데, 그렇게 하면 bundling작업을 하게될 때 특정 확장자마다 어떤 처리작업을 하도록 준비를 해주는 것이다. 예를 들어 아래그림 과정에서 이미지들을 압축하고 결과물로는 특정 경로에 특정이름으로 따로 저장해놓게끔 해줄 수가 있다. 아까 js파일에서 import한다고 했는데 js에서 png를 불러올려고 하면 나중에 빌드 되었을 때 사용될 경로가 문자열로 들어오게 된다. 예를 들어서 js의 png를 불러왔다 그러면 불러온 것..

페이스북이 리액트를 만들기 전에도 앵귤러 백본 엠버 등 수 많은 프레임워크들이 존재했고 해당 프레임워크들은 데이터파트를 담당하는 model, 화면을 보여주게 되는 view, 사용자가 발생시키는 이벤트를 관리하는 controller로 이루어진 MVC 패턴, 그리고 거기서 부터 파생된 MVVM, MVW 등이 패턴들로 이루어져 있다. (MVC, MVVM, MVW 등을 사용하던 기존 웹 프레임워크 / 라이브러리) 여기서 공통점은 바로 Model이다. 방금 언급했던 프레임워크들의 모델은 양방향 바인딩이라는 것을 통해서 모델의 있는 값이 변하는 뷰에서도 값을 변화시켜주고 뷰에서 어떤 값을 변화시키려고 하면 모델의 있는 값을 변화시켜주고 이러한 것을 양방향 바인딩이라고 부른다. 변화라는 키워드는(Mutation) 상..

요즘 웹은 웹페이지가 아니라 웹 어플리케이션이다. 브라우저 상으로도 많은 흐름으로 매우 빠르게 많은 것들을 할 수가 있다. 어떠한 유저인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해줘야 한다. 밑에 코드와 같이 버튼을 눌러서 숫자 0값을 바꿔줄려면 각 DOM Element에 대한 레퍼런스를 찾고 해당 DOM에 접근하여 원하는 작업을 해야한다. Counter 0 이렇게 한다. 아까전에 봤던 id값 number를 찾아와서 가져왔고 button도 increase값 찾아와서 가져왔다. 이벤트설정하고(onclick) 업데이트하고(elNumber.innerText = number) 여기서는 예시로 var를 쓰지만 이제는 머릿속에서 지우자 var number = 0; var elNumber = docu..