Study/React (28) 썸네일형 리스트형 Deployment Github package.json 파일에 프로젝트 주소 연결 "homepage": "https://myusername.github.io/my-app" 커맨드에 yarn add gh-pages 명령어 입력 package.json 파일에 아래 데이터 추가 "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", } 커맨드에 yarn build 명령어 입력 커맨드에 npm run deploy 명령어 입력 깃허브 repo 페이지 설정에서 연결할 branch를 master => gh-pages로 변경 Netlify n.. Function Component | memo, React Hooks How to make Function component? +) 함수형 컴포넌트는 클래스 컴포넌트와 달리, state와 life chcle method를 직접 가질 수 없다. 따라서 간단한 static component를 만들 때 이용할 수 있다. 함수 선언 이용하기 function Avatar(props) { return ( ); } arrow function 이용하기 const Avatar = props => { return ( ) } props에 있는 user 객체가 반복적으로 사용되고 있을 때에는 deconstructing 문법을 이용해서, 중복 작성을 피할 수 있다. ( props ) 대신 ( { user } ) 라고 작성하면 된다. user에서도 deconstructing이 가능한데, 그 때에는.. Class Component | Life cycle method State and Lifecycle 자주 사용하는 Life Cycle Methods componentDidMount( ) { /* code to execute */ } | 리액트 element가 UI로 렌더링되었을 때 자동으로 호출 componentWillUnmount( ) { /* code to execute */ } | 리액트 element가 UI에서 삭제되기 전에 자동으로 호출 Class Component | state, ref, pureComponent setState setState( { dataKey in stateObj : any value, callBack? } ) class 문법을 이용해서 만든 component는 state를 가질 수 있다. 리액트는 컴포넌트의 state가 변경 되면, 자동으로 render 함수를 다시 호출한다. 이 때 state에 정의되어있는 데이터를 직접 바꾸는 것이 아니라, setState라는 API를 이용해야 한다. encapsulation의 관점에서 데이터를 관리하는 것과, 리액트가 setState에 의해 변경되는 state의 변화만 알아차릴 수 있다는 사실 때문이다. class Habit extends Component { state = { count: 0, }; handleDecrement = () => { // .. 이전 1 2 3 4 다음
