Dev/React (21) 썸네일형 리스트형 React 실습 -4 바로가자ㅏㅏㅏ 우리는 항상 점검할 필요가 있어! father component로부터 전달받은 props가 우리가 예상한 props가 맞는지! 이걸 보기 위해서 list각각에 rating을 추가할거야 rating은 말그대로 평가한다는 뜻이야 그리고 이건 number야 바로 코드 추가 해보자고 rating 즉, 평가! 음식이니까 평점을 표시하기 위해 한거야 이건 string이 아니라 number라는걸 기억 해! 앞으로 점점 많아지는 props를 나의 food object로 전달하고 싶기 때문에 이렇게 할거야! 그리고 props types라고 하는것을 설치하려고 해! node.js에 무언가를 설치하는 방법은 npm 뒤에 설치하고 싶은걸 쓰면 돼 props types 같은 경우는 npm i prop-types .. React 실습 -3 호호호호 실습2를 마치고 오셨나? 그렇다면 아직 멀었군ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 실습 2에서 한 일들은 효율적이지 않아!!! 왜냐하면 우리가 새로운 음식을 추가할 때 마다 복붙을 해야 하거든!! 우리는 복붙을 원하지 않아! 데이터는 처음부터 우리가 가지고 있던 데이트가 아니기 때문이야 이 데이터들은 웹사이트에서 온 데이터들이야. 따라서 우리는 갖고 있지 않은 데이터를 복붙 할 수 없어! 따라서 이제 할 방법은 웹사이트에 동적 데이터를 추가하는 방법이야! 가보자고~ 우리가 할 것은 데이터가 있다고 시뮬레이션 하는거야. 데이터가 이미 API에서 왔다고 생각해보자! 따라서 다음 할 일은 함수를 만드는거야, 다른 함수는 foodILike라고 불리는 array야 이것은 food의 배열이 될거야! 기본적으로 모든 컴포넌.. React 실습 -2 제가 하면 여러분도 하실 수 있습니다!! 진짜에요.. 파일간의 혼란을 피하기 위해 potato 파일을 지워보자! 결과를 예상해봅시다! 당연히 오류! potato 파일에 있던 컴포넌트가 사라졌거든! 그럼 컴포넌트를 생성하면 될까? 결과는 ?? 아싸 나온다리!!!!! 자 이제 컴포넌트는 이해한것 같고! 진도를 나가보자!! JSX에서 두번째로 이해해야 할 것은 이 컴포넌트에 정보를 보낼 수 있다는 점!!!!! React가 멋진 이유는 재사용 가능한 컴포넌트를 만들 수 있다는 점!! 이 말은 컴포넌트를 반복 사용 가능하다는 말!! 예를 들자면, 영화목록이 있다고 생각해보자 영화 목록이 여러개 있다면, 하나하나를 수동으로 만들어야하지! 하지만 컴포넌트를 사용한다면 하나의 컴포넌트만 생성하고 나머지는 부르기만 하면.. React 실습 -1 component는 HTML을 반환하는 함수! 따라서 우리는 function, application을 가지고 있고 이것은 HTML을 반환할거야 ReactDOM.render(, document.getElementById("potato")); 부분이 우리가 component를 사용하고자 할 때, component의 형태! 리액트는 컴포넌트를 사용해서 HTML처럼 작성하려는 경우에 필요해 javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다 JSX는 react에서만 쓰이기 때문에 vue, augular 등 에서는 아무짝에도 쓸모가 없어! 하지만 react를 써야한다면 알아둬야한다! 어떻게 컴포넌트를 만들 수 있을까? 매우 간단하지 src폴더에 potato.js를 생성! 여기서 중요!! 컴포넌트.. React를 박살내보자ㅏㅏㅏㅏ React는 Facebook이 만든 사용자 UI 구축을 위한 라이브러리다! 따라서 오직 사용자의 View에만 초점을 맞추고 있음! 즉, Routing 같은 기술이 리액트 자체에 들어가있지 않는다는 얘기!! 하지만 개발자들이 두고 볼 쏘냐~ 리액트에 필요한 여러가지를 만들어놔서 사실상 프레임워크라고 봐도 무방할 정도!(지금까지 프레임워크인줄 알았어..) 뭐가 됐든, 리액트는 3가지 대표적인 특징이 있다 1. JSX 문법 JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줌. 아래 코드를 보자. 지금은 이해 못해도 괜찮괜찮! class HelloMessage extends React.Component { render(.. 이전 1 2 3 다음
