본문 바로가기

React96

의류 쇼핑몰 만들기 4 | CategoryItem 분리 | 이미지 박스를 떼어 내어 컴포넌트로 분리하여 보자. 1. 폴더와 파일을 만든다. 2. App.js 와 category-item 연결하기 3. id는 놔두고 category-item 해당 부분 떼어가기 category-list.jsx 에 붙여넣기 category-list.jsx 코드 정리 한 단계 더 destructuring App.js 정리하기 category 통과 시키기 id도 통과 시키기 모습이 그대로 유지되었다. directory로 박스들 전체 옮기기 directory 폴더와 파일 만들기 App.js에 파일 불러오기 directory.jsx 기본형 만들기 App.js에서 아래 내용을 directory로 옮긴다. directory.jsx defactoring을 해준다. props를 받아와서 아래처럼 .. 2022. 5. 11.
의류 쇼핑몰 3 | 배경이미지 연결하기 이제는 빈 박스 안에 background image를 넣어보자. 오브젝트에 imageUrl을 추가하고 각 이미지 주소를 연결해 준다. 태그를 사용하지 않고, 태그 안에 Inline style을 이용해서 백그라운드 이미지로 넣어준다. 는 셀프 클로즈 태그로 사용한다. style={{ backgroundImage: url(https://photo.jtbc.joins.com/717164705898.jpg)}} 주소를 다이나믹하게 바꿔준다. style={{ backgroundImage: `url(${imageUrl})`}} className을 입력해줘야 이미지가 나온다. 이미지들이 잘 나오는 것을 볼 수 있다. 이미지는 일단 div 태그로 바꿔 놓는다. const App = () => { const catego.. 2022. 5. 11.
의류 쇼핑몰 만들기 2 | Sass 연결 SASS는 nested 형태로 효과를 줄 수 있어 편하다. 1. 터미널에서 Sass를 다운 받는다. npm i sass yarn add sass 2. categories.styles.scss 파일을 만든다 이제는 css 파일을 쓰지 않고 .scss 파일을 쓴다. 3. App.js에서 import 하기 4. categories.styles.scss에 스타일 채우기 .categories-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .category-container { min-width: 30%; height: 240px; flex: 1 1 auto; display: flex; align-i.. 2022. 5. 10.
의류 쇼핑몰 만들기 1 | Setting Up 콘솔에서 crown-clothing 이름으로 리액트 설치하기 npx create-react-app crown-clothing 리액트 설치되면 파일로 이동 cd crown-clothing vscode 열기 code . 이제 vscode에서 작업 해보자. App.js 에서 필요없는 보일러 플레이트만 남기고 다른 내용은 삭제한다. 브라우저에 Hello world가 나오는지 보자. localhost:3000에 잘 나오는 것을 볼 수 있다. 카드 탬플릿 기본형 categories-container > category-container > category-body-container 박스를 만들어보자. 를 이용해 다음과 같이 형태를 잡는다. category-container 부분은 5 박스가 필요하다. 오브젝트가 든.. 2022. 5. 10.
[React] Pure vs Impure Functions | Side Effect 리액트 코드 작성이 impure function과 pure function 둘 다 사용한다. 둘의 개념을 이해하고 가도록 하자. Pure function pure function은 함수가 입력받은 파라미터로만 연산되는 경우를 말한다. A function is considered pure when everything that dictates what it returns is completely isolated from what gets passed into it. This is very important because this function return should solely be dependent on the props being passed. 함수를 정의한 후 호출 하면 파라미터로 2와 4가 들어가.. 2022. 5. 8.
Monsters-Rolodex 2-1 | Functional Component 시작 지금까지 class component를 이용해 코드를 작성했었다. 이제는 functional component를 이용해 다시 새롭게 코드를 짜보자. 이 두 메소드의 큰 차이점은 functional component에는 lifecycle이 없다는 것이다. 보일러 플레이트 class component에서 썼던 constructor(), componentDidMount(), render() 등 lifecycle method는 이제 필요가 없다. 대신 function을 사용하고 위에서부터 아래로 순서대로 코드가 실행된다. class method에서는 render() 함수에 든 내용이 UI에 나타났지만 functional method는 return이 되는 부분이 UI에 나타난다 화면에 Hello World 가 나.. 2022. 5. 8.
Monsters-Rolodex 11 | 타이틀 넣기 | 구글 폰트 연결 Monsters-Rolodex 타이틀 넣기 App.js에 h1을 추가한다. 제목이 생겼다. App.css에서 타이틀에 스타일 주기 구글 폰트 연결하기 구글 폰트에 들어가서 Bigelow Rules를 검색한다. (바로가기) 폰트를 클릭한 후 들어가서 select this style을 클릭한다. 나오는 링크를 복사한다. 이 링크를 index.html안 head 안에 붙여넣기 한다. 다시 App.css로 가서 font-family를 추가한다. 잘 나오는 것을 볼 수 있다. 2022. 5. 7.
Monsters-Rolodex 10 | Card 탬플릿 만들기 폴더, 파일 만들기 Card 폴더와 cars.component.jsx 와 card.styles.css 파일을 만든다 파일 서로 연결하기 card-list 에서 Card 연결 card에서 css 연결 jsx 파일 보일러 플레이트 만들기 card-list에서 card에 해당하는 부분 옮기기 Card.component.jsx로 옮기기 Card로 코드를 옮기고 나면 name, email. id로 에러가 뜨는데 destructure를 다시 해줘야 한다. name, email. id는 this.props.monster로 destructuring 하기 monster가 없으니 받아 와야함 card-list 의 map() 함수 안에 든 monster를 Card로 보내줘야 한다. Card 태그 안에 monster를 넣어 .. 2022. 5. 7.
Monsters-Rolodex 9 | img src 연결 이미지 연결하기 CardList에 몬스터 카드에 있는 h1 대신 이미지 카드가 나오게 해보자. 이미지에 alt 넣기 우선은 태그에 alt를 넣는다. Img source는 robohash에서 가져온다 (바로가기) https://robohash.org/1?set=set2&size=180x180 set: robohash에서 제공하는 두번째 세트 이미지들 string interpolation을 사용해서 {``} src를 작성한다. id로 쓰는 숫자 1을 다이나믹하게 바꾼다. 이름과 이메일도 넣어준다 브라우저에 이미지, 이름, 이메일이 나오는 것을 볼 수 있다. code destructure 하기 monster.name 또는 monster.id 등 monster가 계속 반복해서 나오는 것을 볼 수 있다. des.. 2022. 5. 7.
Monsters-Rolodex 8 | CSS | string interpolation App.js에서 App.css 파일을 연결한다. App.css 내용을 채워준다. body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(to left, rgb(205, 217, 249) 0%, rgb(216, 248, 248) 100%); text.. 2022. 5. 7.
Monsters-Rolodex 7 | search-box Component search-box.component.jsx Search-box 컴포넌트로 따로 떼보자. App.js className, placeholder를 property로 빼는 이유는 다른 곳에 이 SearchBox 컴포넌트를 사용했을 때 같은 className, placeholder를 사용하지 않을 것이기 때문에 뺀다. search-box.component.jsx import { Component } from 'react'; class CardList extends Component { render(props) { const { monsters } = this.props; return ( {monsters.map(monster => ({monster.name}))} ) } } export default Card.. 2022. 5. 1.
[React] render() 2번 되는 이유 App.js가 작동할 때 lifecycle의 작동 순서는 다음과 같다. 1. constructor() 맨 처음 실행 2. render() this.state에 들어있는 monsters 빈 array 실행 3. componentDidMount() 그 안에 setState가 콜되면 변화가 생긴 것이기 때문에 다시 render가 실행된다. 4. render() 고로 렌더가 2번 된다. App 컴포넌트 뿐만 아니라 App 안의 다른 차일드 컴포넌트가 있으면 그 컴포넌트들도 아래의 순서를 따른다. 위에서 차근 차근 코드가 실행 되다가 컴포넌트를 만나면 CardList 파일로 가서 constructor() 함수 -> render() -> componentDidMount() -> render() 순으로 setStat.. 2022. 4. 29.
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.

티스토리툴바