React (10) 썸네일형 리스트형 React를 Container로 연동하기 1. React App 세팅하기 (Typescript) create-react-app testproject --typescript // React App 만들기 cd testproject// React App 폴더 접근 npm run build// React App Build React App 메인폴더에 Build 폴더가 생성되 있다면 성공이다. 2. Dockerfile & Nginx.conf 파일 생성 Dockerfile 생성 # nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다. FROM nginx # root 에 app 폴더를 생성 RUN mkdir /app # work dir 고정 WORKDIR /app # work dir 에 build 폴더 생성 /app/build.. Json Control 하기 // input = json // item = data title // input[item] == data contents for (var item in input){ console.log('item: ' + input[item]); } React 코드 스프리팅 1. 함수 스프리팅 A. 스프리팅을 사용안함 src/App.js import React, { Component } from 'react'; import notify from './notify'; class App extends Component { handleClick = () => { notify(); }; render() { return ( Click Me ); } } export default App; src/notify.js function notify() { alert('종소리 울려라 종소리 울려~'); } export default notify; B. Dynamic Import를 이용한 함수 스프리팅 src/App.js import React, { Component } from 'react';.. @material-ui/core UI를 Class로 구현하기 https://github.com/mui-org/material-ui/issues/15820 @material-ui/styles: Usage in a Class Component? · Issue #15820 · mui-org/material-ui How does one use the makeStyles API within a class component? The documentation only shows examples for function components. When I try to use this within a class component's render method, I g... github.com import { withStyles } from '@material-ui/core/styles.. Arrow Function 및 전역객체의 의미 출처 : https://blueshw.github.io/2017/07/01/arrow-function/ https://blueshw.github.io/2017/07/01/arrow-function/ blueshw.github.io 핵심 객체지향 언어에서의 일반적인 this 의 의미(현재 객체를 지칭)와는 달리 자바스크립트의 this 는 실행시의 context 를 말하죠 Example render() { return Goodbye bind without this; } 여기서 handleClick이 Arrow Function이 아니라면 Undefined 가 호출이 된다 그 이유는 - render() 에서의 this.handleClick은 WithoutBindTest의 handleClick을 말하는게 맞으나 .. Props vs State https://yuddomack.tistory.com/entry/4React-Native-State%EC%99%80-Props-2%EB%B6%80Props 4.React Native State와 Props - 2부(Props) 이 글은 4.React Native State와 Props - 1부(State)와 이어집니다 Props props는 커스텀 컴포넌트와 관계가 깊습니다. 썩 와닿는 예는 아니지만 이번엔 사용자 별로 버튼을 각각 만든다고 가정해봅니다. 거두절.. yuddomack.tistory.com Bind Method 자바스크립트 bind 메소드 Function 객체에서 기본적으로 가지고 있는 메소드 중 call / apply / bind를 많이 사용하는데, call, apply와 bind의 차이점을 알아보자. 우선 call, apply는 함수를 즉시 호출하고, 컨텍스트를 수정할 때 사용된다. (call과 apply에 대한 글 : http://jess2.tistory.com/117) 그러나, bind는 나중에 해당 함수를 이벤트에서 유용한 특정 컨텍스트로 호출할 때 사용된다. call과 apply는 즉시 함수를 호출하지만, bind는 나중에 실행될 때 함수를 호출하기 위한 올바른 컨텍스트를 갖게되는 함수를 반환한다. 이 방법은 비동기 콜백 및 이벤트에서 컨텍스트를 유지 관리할 수 있다. 즉, 특정 함수에 대해 원본 함.. Component LifeCycle API LifeCycle Map 자세히 알아보기 Constructor constructor(props){ super(props); console.log("constructor"); } 생성자 메소드로서 컴포넌트가 처음 만들어 질 때 실행됩니다. 이 메소드에서 기본 state 를 정할 수 있습니다. componentWillMount componentWillMount(){ console.log("componentWillMount"); } 컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다. render 컴포넌트 렌더링을 담당합니다. componentDidMount componentDidMount(){ console.log("componentDidMount"); } 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되.. 이전 1 2 다음
