Frontend/React (35) 썸네일형 리스트형 [React] 숫자 증가감소 버튼만들기 Counter 최근에 코드대장간 유투브강의로 리액트 공부중 props, state, children, setstate, bind, 함수 등등을 총망라한! Counter라는 숫자 증가감소 버튼을 만들어보자. 나는 추가로 리액트 UI라이브러리인 ant design를 활용해 UI를 이쁘게 꾸며줄예정! import React from 'react'; import './App.css' class App extends React.Component { //state초기화 constructor(props) { super(props); this.state = { value: 10 } //bind의 의미 : 강제로 this는 여기다! this.onClickHandler = this.onClickHandler.bind(this); // .. [React] props와 state(+css 적용) 리액트에서 props와 state를 활용해 숫자 10을 화면에 나타내보자. 리액트 props는 '소품'이라는 뜻으로 자바스크립트 객체. 함수의 매개변수처럼 컴포넌트에 전달된다. 예를들어 '사람'이라고해도 이름과 나이 성별등등이 모두다른데 이때 props를 사용. import React from 'react' class App extends React.Component { render() { return ( ); } } const Display = (props) => ( {props.value} ) export default App; state역시 자바스크립트 객체로 함수내 선언된 변수처럼 컴포넌트 안에서 관리되고 class내에서만 이용가능함. props는 아래처럼 생략가능 import React from.. 리액트? 리액트 프로젝트 만들기 리액트? 컴포넌트? 문서(HTML), 스타일(css) 동작(js)를 합쳐 내가만든 일종의 태그 component based development 리액트 특징 -DOM을 직접 제어하지않고 Virtual DOM(가상의 톰트리)를 사용해 이전상태와 이후상태를 비교해 바뀐 부분을 찾아내어 자동으로 변경 CSR vs SSR 리액트의 CSR(client side rendering) JS가 전부 다운로드되어 리액트가 정상 실행되기 전까지는 화면이 보이지않음 리액트의 SSR(server side rendering) JS가 전부 다운로드 되지않아도 일부 화면 보이지만 유저가 사용할 수 없음 리액트의 핵심 모듈 ReactDOM => HTMLElement 연결 React => 리액트 컴포넌트 만들기 import "React.. 이전 1 2 3 4 5 다음
