React26 5. state와 클래스형 컴포넌트 state는 동적 데이터를 다룰 때 사용한다. props는 그런 데이터를 다루지 못하기 때문에. 우리는 state를 사용하기 위해서 클래스형 컴포넌트를 사용할 것이다. import React from 'react'; class App extends React.Component { render() { return I'm a class component } } export default App; class컴포넌트는 클래스라서 return문을 사용할 수가 없어서, JSX를 반환하려면 render()함수를 사용해서 그 안에 return을 작성한다. 함수형 컴포넌트 : return 문이 JSX를 반환 클래스형 컴포넌트 : render() 함수가 JSX를 반환한다. 리액트는 state를 직접 변경하지 못한다. st.. 2020. 8. 1. 4. 리액트 컴포넌트 만들기 map() 함수를 이용하면 여러 개의 컴포넌트를 쉽게 만들 수 있다. 현재 이 코드는 효율적이지 않다. 새 음식을 추가할 때마다 를 복사해야 하므로. 서버에서 넘어온 데이터를 저장할 수 있도록 foodLike라는 빈 배열을 만들거다. 저 배열안에 서버에서 데이터가 넘어온다고 가정하고 음식속성들을 입력할거다. const foodLike = [ { name: 'Kimchi', image: 'https://cdn.pixabay.com/photo/2020/01/01/00/15/one-address-based-4732816_960_720.jpg', }, { name: 'Samgyeopsal', image: 'https://cdn.pixabay.com/photo/2016/04/05/09/17/pork-1308988.. 2020. 7. 31. [생활코딩] React - 리액트의 유용성 / 컴포넌트 만들기 리액트가 없다고 가정했을때와 있을때를 비교하면서 리액트의 유용성을 느껴보자. Public이라는 디렉토리는 우리가 create-react-app에서 yarn start를 했을때 파일을 찾는 다큐먼트 루트이다. 저 Public 디렉토리에 리액트가 아닌 html 코드를 짜보겠다. (리액트가 없다고 가정하기 위해) WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이 정도 웹페이지는 우리가 관리하기 편할것이다. 그러나 각 코드부분이 천만줄이라고 상상해봤을때, 코드가 한눈에 안들어온다. 저 태그는 다른곳에 안보이게 감추고 이름만 로 한다면 가독성이 좋아질것이다. 아래 코드는 컴포넌트를 만드는 코드이다. 저 코드를 해석해보.. 2020. 7. 26. [생활코딩] React - CSS / 배포 리액트에서 css를 수정하는 방법을 알아보겠다. 저 부분을 수정해보자. 앱을 새로고침 했더니 전체용량 2.1MB를 다운로드 받았다고 나온다. 기능이 하나도 없는데 2.1MB이나 된다? 그건 리액트가 기능의 편의성을 위해서 추가해놓은것들 때문이다. create-react-app의 개발환경의 파일의 무게는 무겁다. 여러 보안적인 문제도 그렇고 개발자가 아닌 사람들이 2.1MB를 쓰게 할수는 없다. npm run build 명령어로 빌드를 해보면 디렉토리 구조에서 이전에는 없었던 빌드파일이 생긴다. 저 폴더에 있는 index.html 파일을 보니 읽기 불편할 정도로 띄어쓰기가 안되어있다. 그 이유는 공백과 같이 불필요한 정보의 용량을 싹 날린거다. 그래서 용량이 훨씬 작다. 이렇게 create-react-ap.. 2020. 7. 26. 이전 1 2 3 4 5 6 7 다음
