본문 바로가기

React96

Monsters-Rolodex 6 | Props CardList 컴포넌트에 원하는 property를 적어준다. string, array 상관없다. card-list.component.jsx 파일로 가서 콘솔 props에 뭐가 나오는지 보자. 콘솔 CardList 컴포넌트에 몬스터 리스트가 나오도록 해본다 콘솔에서 리스트 목록이 잘 나오는 것을 볼 수 있다. CardList로 가서 map() 함수 내용을 붙여 넣기 한다. filteredMonsters가 에러가 나는데 props 설정을 해준다. destructuring 하기 this.props를 따로 빼서 destructuring 한다. 2022. 4. 29.
Monsters-Rolodex 5 | Component | App.css List 따로 컴포넌트로 빼기 새 폴더와 파일 만들기 컴포넌트는 재사용 할 수 있기 때문에 따로 폴더를 만들어 관리한다. components 폴더 안 ㄴ card-list 폴더 ㄴㅡ card-list.component.jsx 파일 ㄴ search-box 폴더 card-list.component.jsx 파일 기본 뼈대 만들기 App.js에서 호출하기 몬스터 이름들을 일단 커멘트 아웃 시키고 대신 태그를 넣어준다. 잘 바뀐 것을 알 수 있다. import { Component } from 'react'; class CardList extends Component { render() { return ( Hello ) } } export default CardList; App.css body { margin: .. 2022. 4. 29.
Monsters-Rolodex 4 | Destructuring | Optimizations 코드 정리하기 1. 함수 vs 익명함수 onChange에 익명 함수가 바로 호출하게 되어있다. onChange 안 event는 업데이트 되지만 안에든 익명 함수가 업데이트 되는 것은 아니다. 함수를 따로 빼서 처음 클래스 초기설정할 때 이 함수를 한번만 만들고 나중에 호출만 하면 된다. class에 attached 되어 있기에 this를 써준다. 2. Destructuring | this.state를 빼기 destructuring 하기 render() 함수 안에 object로 적어준다. this.state를 쓰고 있는 이름들 monsters, searchField를 { } 넣어주고 아래있는 this.state를 지워준다. this을 쓰고 있는 단어를 찾아 똑같이 만든다. 바꾼 후 import { Comp.. 2022. 4. 29.
Monsters-Rolodex 3 | 검색 기능|search(),filter(),includes() 앞 포스트에서 몬스터 이름들이 모두 나오도록 해보았다. 검색창 설치 하기 이제는 인풋박스를 만들고 키워드를 한 자씩 입력하면 해당하는 이름이 걸러져 나오도록 해보자. 1. 인풋 태그 만들기 render 함수 안에 input 태그를 입력해 준다. 인풋 태그가 생겼다. 2. 이벤트 핸들러로 인풋 내용 받기 input 안에 이벤트 핸들러를 넣어 입력 받은 내용으로 검색을 하도록 해보자. searchString 변수를 만들고 입력된 string을 소문자로 바꾸어 변수에 저장을 해둔다. 이 입력된 string이 monsters array에 있는지를 검색해야 한다. 이 때 filter(), include() 함수가 필요하다. 3. searchString 을 state에 담기 searchString은 계속 내용이 바.. 2022. 4. 27.
Monsters-Rolodex 2 | API 연결하기 | Rendering Cycle 몬스터 API 연결하기 그럼 이제 API를 연결해보자. jsonplaceholder에서 제공하는 샘플 API를 써보자. Users API Server 사용하기 몬스터 이름들을 하드 코딩 하지 않고, Users API Server에서 아이템들을 불러와 화면에 띄워보는 작업을 해보자. 다음 주소를 연결해보자. https://jsonplaceholder.typicode.com/users 1. 맨 먼저 실행되는 constructor() 함수 안을 기본 세팅으로 바꿔준다. 이 말은 constructor() 함수 안에 있는 이니셜 state를 비워두거나 null로 설정한다. 그래서 하드코드된 monsters array 안을 비운다. 많은 사람이 동시 접속시 네트워크가 끊기거나, 데이터가 오염되었을 경우 유저 화면에.. 2022. 4. 25.
Monsters-Rolodex 1 | map() + key | 이제 Monsters-Rolodex 를 시작해 보자. 기본 뼈대만 남긴다. 일단 this.state에 몬스터 3개의 이름을 저장한다. 이 this.state 안에 담겨야 내용이 바뀌면 자동으로 렌더가 될 수있는 조건이 된다. this.state에 저장된 monster1의 name을 으로 UI 화면에 불러와본다. 화면에 이름이 잘 나오는 것을 볼 수 있다. 몬스터 이름 3개 다 나오게 하기 반복해서 코드를 작성해도 잘 동작하는 것을 볼 수 있다. 하지만 코드가 너무 반복적이다. map()을 이용해 코드를 좀 더 간편하게 만들어보자. 일단 this.state에 있는 오브젝트들을 array 안으로 넣는다. map() + key map()은 array method이다. array 안에 있는 각 element들을.. 2022. 4. 24.
[React] Class Comp3 | setState 함수 통과시키기 이 전 포스트에서 change name 버튼을 눌렀을 때 firstName, lastName 으로 나뉘어 이름을 변경하는 것을 해보았다. Change Name 버튼 클릭을 했을 때 이름을 바뀌는 것을 볼 수 있었다. 콘솔에서 state를 살펴보면 무슨 이유에선지 바뀐 이름 Lia Lee가 나오는 것이 아니라 기존 이름 Jane Kim이 그대로 있는 것을 볼 수 있다. setState에 함수 패스 시키는 이유 보통 자바스크립트 코드는 기본적으로 synchronous로 일어난다. 이 말은 코드가 한 줄 한 줄 위에서 부터 실행이 된다는 의미이다. 하지만 setState는 콜을 받아 컴포넌트들을 다시 랜더할 때 shallow merge가 asynchronously 일어난다. 그래서 원래는 state가 업데이트.. 2022. 4. 22.
[React] State란? setState, useState 뜻 state 선언하는 법 const [state, setState] = useState(초기값) state 변수이다. const, let, var와 차이는 값이 변하게 되면 렌더링이 일어난다는 것이다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다. setState setState는 state 값을 변경시켜주는 함수이다 useState state, setState를 return 하면서 초기값을 설정해주는 hook이다. state 값 변경하는 방법 state 값은 setState 함수를 이용해서 바꿀 수 있다. react가 state 값이 변경 것을 인식하면 화면을 렌더링한다. state 변경 시 값 주의 사항 예를들어 setState(3) 을 하게 된다면 state 값은.. 2022. 4. 22.
[React] class comp 2 | setState 버튼 누르면 이름 바뀌게 하기 하드 코드 되어있는 다음과 같은 화면이 있다. Change Name 버튼을 눌렀을 때 이름이 Lia로 바뀌도록 해보자. 안에 있는 내용을 다이나믹하게 바꿔보자. 이런 경우 이름이 바뀌어야 하므로 state로 바꿔준다. State local state 또는 state라고 한다. 변수와 마찬가지고 정보를 담고 있지만 변수는 랜더가 될 때마다 변하지 않지만 state는 수시로 바뀐 정보를 담을 수 있다. 그러면 state를 만들려면 어떻게 해야할까? constructor() 함수가 필요하다 constructor( ) 이 메소드는 App 컴포넌트가 읽혀질 때 constructor() 함수 안에 든 내용이 맨 먼저 읽혀진다. super( ) constructor() 함수를 부르기 .. 2022. 4. 22.
[React] class comp 1 Component란? 독립적이고 재사용이 가능한 코드 뭉치 자바스크립트 함수와 같은 목적으로 사용되지만 독립적으로 분리되어 사용되어 지고 render() 함수를 통해 html을 리턴해 준다. Classes vs Hooks (functional) 다른 언어에서 classes를 사용하고 리액트에서 classes와 Hooks를 사용한다. 많은 회사에서 둘을 섞어서 사용한다. functional component 함수 안에 html 태그 리턴 JSX 때문에 가능 Class component 리액트에서는 어떤 것을 렌더할 것인지 정하는 것이 중요한데 클래스 컴포넌트를 사용하면 언제 렌더해야하고 안해도 되는지 더 쉽게 이해할 수 있다. 클래스 이름은 App으로 하고 Component 기능을 사용하겠다. App 클래.. 2022. 4. 22.
[React] 기본 파일 설명 | react-scripts | start, build, test, eject 등 react-script 하는 일 "start" files and folders got built by create-react-app inside a package that Json, when setting up the initial project, which is the index.js index.html file and how react.dom at a high level helps us render out our application. "build" 프로젝트를 로컬 환경에서 만들때는 걱정 안해도 되지만 웹사이트를 인터넷에 호스팅할 때는 인터넷 커넥션을 고려해야 하고, 어떤 곳은 아주 느릴 수가 있다. 그래서 우리의 코드가 아주 optimized 되어야 한다. so that as small and ef.. 2022. 4. 21.
[React] <React.StrictMode> 사용하면 addtional checks and warnings that React says in case you're using or deprecated code. 2022. 4. 21.
[React] React.dom import React from 'react'; import React.DOM from 'react-dom'; React: it's the underlying engine that actually does all of the work when it comes to how React functions as a application builder. Dom: React Dom is specifying that engine should be directed towards web related applications. 이 2개의 라이브러리가 합쳐져서 리액트로 웹 어플리케이션을 만들 수 있다. 리액트 엔진을 이용해서 React Native 등을 만들 수 있다. 2022. 4. 21.
package.json | package-lock.json npx create-react-app fileName 을 콘솔에 쓰고서 create-react-app tool을 실행시킨 후 VSCode로 파일을 열면 package.json 파일이 생성되어 있는 것을 볼 수 있다. 이 안에는 리액트 프로젝트를 돌리기 위한 기본 라이브러리들과 패키지들의 리스트들이 적어져있다. package-lock.json package managers가 만든 어떤 버젼의 defendancies가 있는지 보여준다. 팀으로 일할 때 다른 팀원과 서로 버젼이 다르지 않게, 같은 버젼으로 library를 사용할 수 있도록 한다. package-lock.json 또는 yarn.lock 둘 중에 하나만 있으면 된다. yarn 쓰는 경우 package-lock.json 은 지워도 된다. 2022. 4. 21.
좋은 리액트 개발자가 되려면 시니어 리액트가 되기위해서 3가지 리액트 스킬이 필요하다. 1. 컴포넌트 정하기 Decide on Components 2. 스테이트 정하기 Decide the State and where it lives 3. 스테이트 변할 때 무엇을 변하게 할지 What changes when state changes 2022. 4. 20.
NPM vs YARN 명령어 차이 Install dependencies from package.json: npm install yarn Install a package and add to package.json: npm install package --save yarn add package Install a devDependency to package.json: npm install package --save-dev yarn add package --dev Remove a dependency from package.json: npm uninstall package --save yarn remove package Upgrade a package to its latest version: npm update --save yarn upgrade.. 2022. 4. 18.
[Keeper-App 8] Transparent Textures 배경에 패턴 넣기 앱 백그라운드에 텍스쳐를 넣어보자. Transparent Textures를 사용한다 (바로가기) 원하는 패턴을 선택해 클릭하면 url이 나온다 url을 모두 복사해 body안 background-img에 붙여준다. 연하게 패턴이 보인다. 2022. 4. 18.
[Keeper-App 7] 박스에 Zoom transition Material UI 안 검색에서 Zoom을 검색한 후 Zoom API(바로가기)로 간다. Zoom import를 한다. import Zoom from '@mui/material/Zoom'; 버튼 줌인하기 in Props를 사용해서 true, false boolean을 사용한다. 박스가 접혀 있다가 클릭하면 펼쳐지기 접혔을 땐 한 줄 박스로 있다가 박스를 클릭하면 내용 보두 보이게 하기 일단 useState를 추가한다. 에 onClick를 넣어 expand 메소드와 연결한다. input이 박스 펼쳤을 때만 보이게 한다. 의 rows가 접혀 있을 땐 1, 펼쳐졌을 땐 3 가 되도록 하기 버튼도 접혀있을 땐 안보이다가 펼쳐지면 보이게 하기 2022. 4. 18.
[Keeper-app 6] Material icon입력과 에니메이션 Material UI 앱에 스타일을 더 추가해보자. Material UI 다운 받는다. https://mui.com/material-ui/getting-started/installation/ npm install @mui/material @emotion/react @emotion/styled Material icon 다운 npm install @mui/icons-material Note에 있는 DELETE 글자를 아이콘으로 바꿔보자. 원하는 아이콘을 찾은 다음 (아이콘보기) 아이콘을 클릭해 주소를 복사한 후 Note에 import 한다. 원하는 자리에 형태로 입력한다. 모양이 바뀐 것을 볼 수 있다. Keerper에 Hightlight 아이콘 넣기 Highlight 아이콘을 검색한 후 태그 안에 넣는다... 2022. 4. 18.
[Keeper-App 5] 선택 아이템 지우기 Note 컴포넌트에 DELETE 버튼이 있다. 이 버튼을 눌렀을 때 App.js에 id를 받아 delete 함수를 실행 시킬 것이다. property로 이 deleteNote 함수를 보내준다. 클릭 했을 시 onDelete() 함수가 호출 되도록 한다. 이제는 deleteNote 함수에서 아이템을 삭제하는 작업을 한다. 이미 가지고 있는 노트들(prevNotes)들 중에서 보내준 id에 해당하는 아이템을 뺀다. 그리고 나머지 prevNotes들을 다시 정렬한다. filter를 사용하여 id에 해당하는 index를 제외한 나머지 아이템들을 array에 다시 정렬하라고 하였다. 하지만 아직 에 id가 설정되어 있지 않다. 에 id를 설정해 주자. Note 컴포넌트에 가서 클릭된 아이템의 id를 deleteN.. 2022. 4. 17.
[Keeper-App 4] notes array 만들어 노트 map()으로 돌리기 이제는 들어오는 note들을 담을 state를 만들어 보자. notes들을 담을 useState를 설정한 후 버튼 클릭 되었을 때 note가 addNote함수로 들어오면 array 안에 쌓이도록 작업한다. array에 있는 아이템을 map()으로 돌린다. 입력한 내용이 잘 나오는 것을 볼 수 있다. 하지만 입력한 내용이 사라지지 않고 있다. 내용 입력 후 버튼 눌렀을 때 note가 다시 리셋 되도록 한다. 내용 입력 후 자동으로 내용이 없어지는 것을 볼 수 있다. 2022. 4. 17.

티스토리툴바