본문 바로가기

React/React Basic56

[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.
[React] Spread Operator Spread Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax ...array 원하는 곳에 spread operator(...이름) 입력하면 스프레드되어 들어간다. ...Object 오브젝트도 가능하다. ...을 붙이지 않았을 때 Nested object가 된다. 앞에서 작업하던 코드를 고쳐보자. 보기에 괜찮긴 하지만 너무 길다. 1. 모든 if statement를 지운다. 2. firstName property, lastName property, email property 등 어떤 것이든 이전 벨류(prevValue)들을 스프레드 오퍼레이터가 들어간 오브젝트로 리턴한다. 3. .. 2022. 4. 4.
[React] Changing Complex State | 풀네임 받기 | form input prevValue Last Name, First Name 입력칸 만들고 풀 네임이 자동으로 에 들어가도록 해보자. 앞에서 배운 부분을 활용하면 다음과 같은 코드를 쓸 수 있다. import React, { useState } from "react"; function App() { const [fName, setFName] = useState(""); const [lName, setLName] = useState(""); function updateFName(event) { const firstName = event.target.value; setFName(firstName); } function updateLName(event) { const lastName = event.target.value; setLName(last.. 2022. 3. 28.
[React] State 란? State 란 컴포넌트의 현재 상태의 정보를 보여주는 자바스크립트 오브젝트이다. State is a plain JavaScript object used by React to represent an information about the component’s current situation. - 출처 - https://medium.com/edonec/state-in-react-an-overview-a182675cee2c 2022. 3. 26.
[React] Input value | Forms | event.preventDefault(); |onClick, onChange Form 형태에서 내용을 입력 받아 화면에 보이게 하는 법을 알아보자. 기본 세팅 인풋과 버튼이 있다. onChange attribute 사용 input에 이름을 입력하면 콘솔에 이름이 나오게 해보자. 이 때 onChange attribute를 사용한다. onChange에 벨류를 함수로 설정해주고 벨류에 변화가 생길 때마다 작동을 한다. https://www.w3schools.com/tags/ref_eventattributes.asp 우선은 인풋에 내용 입력 했을 때 콘솔에 changed가 뜨도록 해보자 인풋에 내용을 입력하였더니 콘솔에 "Changed"라는 텍스트가 떴다. handleChange 함수가 잘 작동되고 있다. 인풋에 내용이 입력되어 onChange에 있는 handleChange 함수가 트리.. 2022. 3. 26.
[React] 이벤트 핸들링 | 버튼 색 바꾸기등 이벤트에 따라 다른 것을 랜더링 마우스를 버튼 위에 올렸을 때 색깔이 변하는 효과를 주는 경우들 .. ? conditional rendering inline styling mouse events managing state 버튼 기본 세팅 index.js에서 기본 세팅한 후 App.js에서 버튼 만들기 CSS * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: "Source Sans Pro", sans-serif; color: white; font-weight: 300; background: #50a3a2; width: 100%; height: 100%; } .container { margin: .. 2022. 3. 25.
[React] Destructuring assignment syntax The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment array를 destructure하기 data.js 에 animals array가 있다. 2개의 object를 가지고 있다. App.js에서 animals array를 불러오고 나서 콘솔에 뭐가 있나 본다. 콘솔을 보면 두개의 오.. 2022. 3. 23.
[React] setInterval() setInterval() 함수 setInterval(sayHi, 1000) 1초마다 sayHi 가 계속 뜸 기본 설정 밀리세컨드 1초 = 1000 혹시 setInterval(sayHi)까지만 입력했다면 화면이 sayHi로 도배가 됨 그래서 꼭 ! 시간을 먼저 적어주고 내용을 적어줘야 한다. 2022. 3. 21.
[React] Hooks | useState() | 좋아요 숫자 올리기 | 1초마다 시간 나오게 하기 | 웹사이트를 인터렉티브하게 만들고 변화가능한 state로 만들기 위한 방법을 알아보자. 이 때 필요한 것이 Hooks이다. index.js에서 다음과 같이 숫자와 버튼을 만든다. 여기서 + 버튼을 한 번 누를 때마다 숫자가 올라가도록 하려면 어떻게 해야할까? 0으로 시작하는 변수를 하나 만들고, 1 씩 추가가 되는 함수를 만들어 보자. 그 전에 우선 버튼 클릭시 함수가 잘 작동하는지 보기 위해 콘솔에 "I got clicked"가 프린트 되도록 해본다. 여러번 눌렀더니 횟수가 옆에 표시가 된다. 함수는 잘 작동하는 것을 볼 수 있다. 이제는 1씩 증가하는 expression을 작성해 본다. ( increase by 1 ) console.log(count)를 해서 보면 숫자가 증가하는 것을 볼 수 있다. 하.. 2022. 3. 20.
[React] State | Declarative vs Imperative Programming 우리가 만든 리액트 앱을 인터렉티브하게 하려면 어떻게 해야할까? 그러려면 State에 대한 개념을 이해해야 한다. 방정식으로 표현해보면 UI 즉 유저가 내 웹사이트를 보는 것은 내 앱의 state가 들어간 함수로 나타낼 수 있다.... 예를 들면 얼음과 물 둘 다 같지만 -10 일 땐 얼음으로 보여지고, 60 일 땐 물로 보여지는 듯 같은 리액트 컴포넌트지만 value 또는 state가 얼마냐에 따라 보여지는 interface가 다르다. To Do list 앱에서 유저가 할 일을 클릭하면 취소줄(line through / strikeout)이 그려지게 하는 경우 2 가지 방법으로 실행할 수 있다. 나오는 결과물은 같다. 1. Declarative programming 방식 일단 할 일을 하나 적어본다. .. 2022. 3. 19.
[React] Ternary Operator | && | Single responsibility | 로그인, 사인업 플로우| Expression vs Statement | Conditional Rendering | 로그인 플로우를 배워보자. 유저가 로그인 했을 때는 Hello가 나오고, 로그인 안했을 때는 로그인 form 박스가 나오도록 해보자. 시작 코드 index.html styles.css * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: "Source Sans Pro", sans-serif; color: white; font-weight: 300; background: #50a3a2; width: 100%; height: 100%; } .container { margin: 10% auto; padding: 80px 0; text-align: center; } .container h1 { font-.. 2022. 3. 17.
[React] Arrow Function 기본형 함수가 있다. 이 square 함수를 map 안에 익명함수로 바로 넣어 버릴 수 있다. 에로우 함수 사용 인풋이 하나면서 statement가 한 줄 일 때는 { }와 return도 삭제 가능 Arrow 함수에 대해 더 자세히 알기 https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ ES6 In Depth: Arrow functions – Mozilla Hacks - the Web developer blog ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript s.. 2022. 3. 16.
[React] 이모티콘 자료에서 뜻만 빼서 100자 까지만 보이기 emojipedia.js 파일 내용 안에서 index.js로 meaning만 빼와보자. const emojipedia = [ { id: 1, emoji: "💪", name: "Tense Biceps", meaning: "“You can do that!” or “I feel strong!” Arm with tense biceps. Also used in connection with doing sports, e.g. at the gym." }, { id: 2, emoji: "🙏", name: "Person With Folded Hands", meaning: "Two hands pressed together. Is currently very introverted, saying a prayer, or hopin.. 2022. 3. 15.

티스토리툴바