1. Component 리액트는 컴포넌트 기반의 구조이다. 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 에어비앤비 페이지처럼 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성한다. 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성하기 때문이다. 리액트 컴포넌트의 입력은 props가 되고, 출력은 React element가 된다. 2. Props 리액트 컴포넌트 입력으로 들어가는 props에 대해 살펴보자 prop은 property(속성)라는 영어단어를 줄여서 쓴 것이다. 즉, prop은 react 컴포넌트의 속성이다. 마치 붕어빵에 들어가는 재료와 같다. 같은 붕어빵이라도 어떤 맛을 넣냐에 따라 다른 맛이 난다. 에어비앤비 컴포넌트도 겉은 같은 모습이지만, 안에 들어가는 정보에 따..
1. Elements 엘리먼트란 리액트 앱을 구성하는 가장 작은 블록들이다. 엘리먼트의 형태는 다음과 같다. createElement를 적용하면 위와 같이 변환되는 것이다. 리액트 엘리먼트는 실제로 우리 눈에 보이는 것을 기술한다. 또한 돔 엘리먼트와는 다르다. 돔 엘리먼트는 가상 돔의 엘리먼트를 의미한다. 2. Elements 특징 1) 불변성 한 번 생성된 엘리먼트는 변하지 않는다. 즉 엘리먼트 생성 후에는 attributes나 children을 바꿀 수 없다. 마치 붕어빵과 같다. 구워진 붕어빵 속은 바꿀 수 없다. 그렇다면 화면에 변경된 엘리먼트를 보여주기 위해선 어떻게 해야할까? 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성하면 된다. 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바..
[SpringBoot - RestController] @RequestMapping("/userapi") //중략 @GetMapping("/user/search") @ApiOperation(value = "SearchCondition 에 부합하는 조건을 가진 사용자 목록을 반환한다.", response = User.class) public ResponseEntity search (SearchCondition con) { try { System.out.println(con); List users = us.searchByCondition(con); if (users != null && users.size() > 0) { return new ResponseEntity(users, HttpStatus.OK); }..
1. 상세페이지 구분을 위해 id 설정하기 지금까지 postman을 이용해 상품 정보를 쏘고 있었는데, 각자 다른 상세페이지를 열어주기 위해 각 상품마다 id를 고유하게 부여한다. 이렇게 get요청을 보내면 잘 오는 것을 볼 수 있다. 상세페이지의 url products/1, products/2 이런식으로 줄 것이다. 2. id 1번 아이템의 상세 페이지를 만들자 새로운 request를 추가해 products/1이라는 상세페이지에 꽂힐 데이터 정보를 만들어 줄 것이다. json 형식으로 1번 id의 정보를 넘겨준다. 3. 상세 페이지 경로 수정 [main > index.js] 상세페이지 경로는 to 부분이다. to 부분에 임의로 map 함수의 index를 줬었는데, 이제는 products의 고유한 id를..
1. 에러가 왜 생길까? 여러 페이지를 구분하지 않고, 똑같은 페이지를 불러오면 이런 에러가 난다. key가 필요해~ key~~ 심지어 결과물을 돌려주지도 않는다... 원래였으면, product 폴더 아래 자동으로 실행되는 product > index.js가 실행되어야 하는데 말이다... function ProductPage(){ return 상품 상세 페이지 } export default ProductPage; 이 h1 태그가 안나온다. 만약 링크 조차 넘어가지지 않을 경우에는 리액트가 가장 먼저 켜질 때 실행되는 index.js의 태그를 지우면 잘 나온다. 2. 제품 상세페이지의 각 페이지를 구분해서 보여주자 리액트를 실행시키면 index.js로 먼저 가고, 여기서 App.js를 실행시킨다. [App..
git 수업이 지나고 다시 돌아온 리액트 관련 수업... 잘 기록하고, 나중에 까먹을 때 다시 와야지 ㅠ 1. react-touter-dom? 리액트에서 화면 전환을 하기 위한 라이브러리이다. 2. react-touter-dom 설치 [설치] npm install react-router-dom@5.2.0 옛날 강의들은 대부분 5버전을 쓴다. 최신버전은 안되는 기능들이 있기 때문에 혼란을 막고자 해당 버전을 쓴다. 나는 성격이 급해서 바로 깔아가지고, 최신버전을 설치했었는데, 그럴 경우는 지우고 다시 깔면 된다. [삭제] npm uninstall router-react-dom 5.2버전 설치완료된 모습이다. packge.json에서 확인할 수 있다. 3. react-touter-dom > BrowserRo..
postman을 이용해 mock서버를 만들어주고, mock서버에 get방식으로 요청하면 JSON형식으로 응답 데이터를 넘겨줄 수 있게 했다. (강의 - Postman 이용하기 편) 이를 react에서도 사용해보겠다. 1. axios 다운 상품 정보를 홈페이지에 나열할 것이다. 근데, 네트워크 통신으로 결과를 받아서 동적으로 상품 정보를 받아올 것이다. 때문에 네트워크 통신에 필요한 axios를 다운받는다. 이것 또한 npm에게 시킨다. npm install axios 잘 설치가 되었다면, package.json에 dependencies에 axios명과 설치된 버전이 기록된다. 혹은 node_modules에서도 axios 파일을 확인할 수 있다. 2. axios 사용 function MainPage(){ ..
1. jsx (A syntax extension to javascript) jsx는 리액트를 사용할 때 필수적으로 사용해야하는 문법이다. javascripts xml로 자바스크립트에 xml을 확장한 문법이다. 즉, 자바스크립트 + xml/html인 것이다. 예를 들면 이런식으로 사용할 수 있는 것이다. const element = Hello react; 리액트에서 js에 html 태그를 작성할 수 있었던 이유는 jsx 문법을 사용하기 때문이다. 사실 리액트의 정식 명칭도 리액트.js라는 것! (ㄴ 0 ㄱ) function ChildComponent(props){ const {name, age} = props; return 이름은 {name} 이며, {age}살 입니다. } export default Ch..
