props React의 props는 HTML의 attribute와 유사합니다. 예를 들어, "brand" attribute를 "Car" element에 추가해봅시다. const myelement = ; 그럼 컴포넌트는 argument를 props object 처럼 받습니다. 아래 코드는 컴포넌트에서 "brand" attribute를 사용하는 모습입니다. 부모 컴포넌트로 부터 전달 받은 props는 하위 컴포넌트에서 this.props 라는 구문으로 사용가능합니다. class Car extends React.Component { render() { return I am a {this.props.brand}!; } } 컴포넌트가 일반적인 자바스크립트의 함수라면, props는 함수의 입력값(input)이 됩니..

컴포넌트(Component) 컴포넌트는 UI를 구성하는 독립적이고 개별적인 아주 작은 개체(entity)입니다. 이러한 컴포넌트들은 각각의 코드와 구조, API가 있습니다. 컴포넌트들을 모아서 UI(User Interface)를 구현하고 UI들은 사용자에게 View라는 형태로 제공됩니다. 컴포넌트의 장점은 코드를 재사용 가능하다는 것입니다. 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 집니다. 함수형 컴포넌트 function App(props) { return Hello, {props.name}; } 클래스형 컴포넌트 class App extends Component { render() { return Hello {this.props.name}; } } 컴포넌트의 이름은 항상 대문자로 ..

리액트가 필요한 이유 Javascript를 이용하여 DOM을 변경하게한 경우에 만약 사용자에 의한 인터렉션이 많은 웹 페이지라면, 처리해야할 이벤트도 많아지고, 관리해야 할 상태값도 다양해지고, DOM도 다양해 질 것이기 때문에 DOM 업데이트와 이벤트 핸들러 간의 관계가 매우 복잡해질 것이다. 그래서 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다. 이러한 프레임워크는 자바스크립트의 특정 값이 바뀌면, 특정 DOM의 속성이 바뀌도록 연결을 해준다. 이로 인해, 업데이트 하는 작업을 간소화할 수 있었다. 하지만 React는 위의 프레임워크들과는 달리 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라 아예 화면에 보여지는 V..

datatables의 그리드를 구성하게 될 데이터가 담겨있는 리스트는 반드시 "data" 라는 이름으로 전달받아야한다. CRUD Create Read Update Delete create, update, delete는 어떠한 페이지로 가서 오퍼레이션이 실행된다. delete는 링크같은 페이지 개념이 아니라 버튼과 같은 오퍼레이션 개념이다. style attribute를 쓸때는 다음과 같이 써야한다. style={{ width: 116 + 'px' }} state의 오리지널 데이터를 수정하는 메서드는 쓰지 말 것 concat을 권장 하지만, 난 rest문법을 사용할 꺼임. 배열의 경우 Array.from() 객체의 경우 Object.assign() 을 사용하면 원본을 해치치 않을 수 있음. props는 직..

state 소개 props는 사용자가 component를 사용하는 입장에서 중요한 것이고 state는 그 props의 값에 따라서 내부에 구현에 필요한 데이터들 component의 기본적인 동작을 바꾸고 싶을 때 props를 이용하여 component를 조작가능하다. component 내부적으로 사용되는 것들 그것들을 state 라고 한다. 외부의 props라는 것과 그 props에 따라 component를 구현하는 state는 철저히 구분되어 있어야 한다. state 사용 render 함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 내부에 작성한다. constructor(props) { super(props); this.state = {...} } 외부 사용..

공부 전략 CODING -> RUN -> DEPLOY CRA 설치: npm install -g create-react-app CRA 세팅: create-react-app . 개발환경 실행: npm run start 빌드: npm run build Component들을 id="root"인 곳에다가 넣기로 약속! 대부분의 파일은 src안에 삽입 (css, js) 등등.. src의 index.js 내부에 있는 코드 ReactDOM.render(, document.getElementById("root")); 중에서 이 Component임 import componentName from 'link' CRA는 상당히 무거움 1.7mb 정도 빌드를 하게 되면 CRA가 공백과 같이 불필요하게 용량을 차지하는 부분을 삭제..