본문 바로가기

React/React Basic56

React and ReactDOM | HTML안에 리액트 코드 바로 작성해보기 pure react pure-react 폴더를 만들고 그 안에 index.html을 만든다. vs code에서 열어보자. html 파일에서 html을 치면 html:5가 뜬다. html:5를 눌러 보일러 플레이트를 완성한다. div 태그에 id를 root으로 하고 React is NOT rendered 문구를 넣는다 터미널로 html 을 열어보면 html이 브라우저가 열린다. 여기서 React와 ReactDOM 라이브러리를 불러온다. React Library는 엔진이다. 무엇을 렌더링하고 어떻게 렌더링 할 것인지 결정한다 ReactDOM도 우리가 무엇을 렌더하려고 하는지 정한다. React는 ReactDOM을 써서 브라우저에 React Native면 Native element를 써서 폰에 React VR.. 2022. 6. 1.
Monsters-Rolodex 2-4 | destructuring | 끝 props 자리에 바로 destructring할 수 있다. card-list.jsx 파일 props를 생략하고 바로 filteredMonsters만 보이게 할 것이다. 자바스크립트 { } 를 써서 filteredMonsters를 argument 자리에 바로 넣어준다. return도 삭제한다. import Card from '../card/card'; import './card-list.css'; const CardList = ({ filteredMonsters }) => {filteredMonsters.map((monster) => { return ( ) })} export default CardList; search-box.jsx 정리 import './search-box.css'; const Sear.. 2022. 5. 31.
Monsters-Rolodex 2-3 | useEffect | Fetch API 외부 API에서 몬스터 이름을 불러와 useState를 사용해 array 안에 담는 작업을 해보자. 외부 API를 불러오기 위해 fetch 함수를 이용해 데이터를 불러온다. 아래 처럼 fetch 함수를 바로 사용해서 데이터를 불러오면 문제가 발생한다. render가 얼마나 일어나고 있는지 콘솔로그로 확인하면 render가 끝없이 일어나는 것을 볼 수 있다. 이유는 fetch로 외부의 데이터를 불러오는데 매번 불러올 때마다 리액트는 렌더를 다시 한다. 그 때마다 데이터를 새로 저장하여 가리킨다. 이미 똑같은 데이터가 있다하더라도 같은 메모리로 보지 않는다. 값이 같은 게 중요한 게 아니라 같은 곳을 포인팅하고 있어야 하는데 그렇지 않다는 것이다. 더 문제는 fetch 함수 자체만 따로 isolate해서 렌.. 2022. 5. 29.
Monsters-Rolodex 2-2 | useState 설치 useState를 사용하여 input에 입력한 내용이 setState에서 받도록 해보자. setSearchField 에서 searchField가 아닌 searchFieldString을 넣는 이유는 searchField는 useState에서 이미 기본값으로 설정이 되어 있다. setState에 넣어봤자 같은 값을 가지고 변화가 되지 않는다. input으로 들어온 searchFieldString을 setState에 넣어야 계속 변화를 감지하고 re-render를 한다. 일단 input에 아무 것도 입력하지 않고 console.log에 searchField를 나오게 하면 기본으로 입력되어 있는 abc가 나온다. searchFieldString --> searchField 값이 이동하고 console.log에 .. 2022. 5. 29.
[React] Object 특징 object는 메모리에 포인팅을 한다. 변수 obj1은 {name: 'Jane'} 오브젝트를 포인팅하고 있다. obj2 변수를 만들어 obj1으로 설정하면 obj1이 포인팅하는 오브젝트에 obj2도 같이 {name: 'Jane'}으로 포인팅하고 있는다. strict equality 를 써서 같은지 물어보면 같다고 나온다. 이 두 포인터가 같은 메모리에 포인팅하고 있는가? 라고 묻는 것이다. obj 1이 이름을 바꿔도 obj2도 같은 이름으로 동시에 바뀐다. 벨류가 변해도 메모리는 같은 곳을 포인팅하게 된다. 메모리가 새로 생기는 경우 1. obj3는 obj1과 모양은 같지만 메모리를 따로 써서 만든 경우 이 둘은 같은 메모리가 아니기에 같지 않다고 나온다. 2. obj 4에 벨류를 직접 입력하여 메모리를.. 2022. 5. 18.
[React] Lifecycle Method 라이프 사이클 Lifecycle Method 라이브러리, 프레임워크들은 라이프 사이클을 가지고 있는데 라이브러리가 동작하는 순서를 의미한다. will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수 예를 들어 혹시 마운트 되기전 해야 하는 작업이 있으면 componentWillMount() 에 내용을 넣어준다. did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수이다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount 3가지로 분류된다 1. Mount 페이지에 컴포넌트가 최초 심어지는 것을 말한다. 컴포넌트 라이프에서 딱 한 번만 일어난다. 같은 앱 컴포넌트가 있더라도 같은 것이 아니라 새 인스턴스가 생성된 것이다. Mounting is the first time a.. 2022. 5. 18.
[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.

티스토리툴바