커리까지

sass가 5.0버전이라 4.0버전이랑 충돌이 나서 그렇다. $ npm uninstall node-sass $ npm install node-sass@4.14.0 혹은 $ yarn remove node-sass $ yarn add node-sass@4.14.0 이전 버전을 삭제하고 다시 깔면 된다. 설치가 제거 시 오류가 발생하면 리액트 폴더 -> node-modules에 들어가서 node-sass 가 들어간 폴더를 삭제해버리고 npm 혹은 yarn 혹은 둘다 다시 설치하면 된다.

class ApiExample extends React.Component { constructor(props){ super(props); this.state = { data: '' } } callApi = () => { fetch('https://jsonplaceholder.typicode.com/todos/1') .then(res => res.json()) .then(json => { this.setState({ data:json.title }); }); } componentDidMount(){ this.callApi(); } render(){ return ( {this.state.data? this.state.data : '데이터를 불러오는 중입니다.'} )..

state 내부적으로 변경될 수 있는 데이터를 처리할 때 효율적으로 사용 class Clock extends React.Component { constructor(props){ super(props); this.state= } render(){ return ( 현재 시각은 [{this.props.date.toLocaleTimeString()}] 입니다. ); } } function tick() { ReactDOM.render(, document.getElementById('root')); } setInterval(tick, 1000) this.props. : class를 사용하면 안에 props가 있어서 this를 붙여줘야 한다. super(props) : constructor를 사용해서 ..

저번강의 이름, 학생, 색상이 속성 function Show(props) { return ( Name is {props.name} ); } const element = ; ReactDOM.render(element, document.getElementById('root')); Show라는 특정한 컴포넌트를 태그처럼 쓸 수 있다. ReactDOM.render(, document.getElementById('root')); 이렇게 바로 넣어도 된다. function Show(props) { return ( Name is {props.name} ); } Show.defaultProps = { name:'펭하' } ReactDOM.render(, document.get..

리액트는 자바스크립트 문법의 확장판 항상 render를 해서 명시적으로 알려준다. function formatInfo(student) { return student.name + "["+ student.id +"]" } const student = { id: "201520000", name:'펭하', color:'blue' } const element = ( {formatInfo(student)} ); ReactDOM.render(element, document.getElementById('root')); dom에서 element 를 root에 그려주겠다. 함수를 생성하고 이 함수를 불러와서 보여준다. element의 중괄호가 jsx다. 어떤게 자바스크립트인지 명..

코드펜 react,react-dom을 불러온다. 전처리는 babel을 선택한다. 우선 html에 div태그를 만든다. class HelloReact extends React.Component { render(){ return ( Hello world ) } } ReactDOM.render(, document.getElementById('root'));

다른 라이브러리와 사용할 수 있다. 자바스크립트 라이브러리여서 자바스크립트가 선행되어야 한다. 선언적 컴포넌트 기반 한 번 배워서 어디에서나 사용가능 장점 클라이언트 렌더링 와 서버사이드 렌더링도 지원 클라이언드 렌더링 필요할 때 마다 정보를 받아오기 서버 사이드 렌더링 미리 정보를 가지고 있기 구글봇, 검색엔진 봇 검색결과를 쉽게 보여 줄 수 있다.