본문 바로가기

FrontEnd/React20

[ReactJS] Publishing, 배포하기 강의를 들으면서 가장 놀랐던 순간이다. 리액트는 자체 기능 중에 배포 기능까지 갖추고 있었다. 매우 유용할 것 같으니 일단 정리해 보도록 하겠다. 1. gh-pages 설치하기 터미널을 열고 다음 코드를 실행시켜 리액트 내에 gh-pages를 설치해준다. npm i gh-pages 관심없겠지만 gh-pages는 github pages에 결과물을 업로드 할 수 있게 해 주는 패키지이다. 2. build 실행 build는 우리가 우리의 코드를 브라우저로 보내기 위한 압축 과정에 해당한다. 다음 코드를 터미널에서 실행하자 npm run build 3. pakage.json 수정 pakage.json의 코드 일부분을 다음과 같이 수정해주자 우선, developement뒤 즉 코드의 맨 끝자락 부분에 내가 배포하.. 2023. 1. 13.
[ReactJS] Params, Link Params는 사이트 주소 상의 :id 부분을 통해 개발자들에게 지금 다루는 API 정보를 쉽게 접근할 수 있는 기능을 수행해준다. 다음은 내가 만든 영화 소개 페이지이다. import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; // useParams() -> returns id(the last one in path) import { Link } from 'react-router-dom'; function Detail() { const { id } = useParams(); const [loading, setLoading] = useState(true); const [currMovie, setCur.. 2023. 1. 13.
[ReactJS] Router Router란 http 주소 내에서 보여줄 페이지를 골라주는 길잡이 역할을 한다. import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; import Home from "./routes/Home"; import Movie from "./routes/Detail" function App() { return ( ) } export default App; 윗 코드에서 react-router-dom으로부터 BrowserRouter, Routes, Route를 빌려 와 주소 뒤에 /movie가 붙었을 때는 Movie component를, 아무 것도 붙어 있지 않을 때는 Home component를 불러 옴을 알 수 있다. 2023. 1. 13.
[ReactJS] 코인정보 서비스 만들기 (외부 Api와 연결) 이번 시간에는 외부 Api로부터 정보를 얻어 와, ReactJS를 이용하여 이를 사용한 서비스를 만들어 보았다. 우당탕탕 만든 느낌이 드나, 최선을 다해 만들어봤으니 코드리뷰를 해보도록,, 하겠다. 생각하기는 쉬울 것 같았는데, 막상 만들려하니 빡센 듯한 ㅋㅋ import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [money, setMoney] = useState(0); const [coinPrice, setCoinPrice] = useState(0); const [coinName, s.. 2023. 1. 12.
[ReactJS] map() 매서드의 활용 사실 이걸 JS문법이라 해야할지, React 문법이라 해야할지 애매한 부분이 있긴 하다. 그러나 매우 유용한 매서드이고 처음 만져 본 매서드라서 정리를 한번쯤 하고 넘어가려 한다. 아래 코드를 살펴보자 import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { // stop refreshing event.preventDefault(); // if toDo is e.. 2023. 1. 12.
[ReactJS] useEffect() 의 활용 많이 사용하는 기술이라고 하지는 않는다. 다만 쓰지 않는 기술은 아니니 간단하게만 보고 넘어가도록 하자. 아래 코드의 useEffect() 두 개는 같은 동작을 실행하는 코드이다. import { useState, useEffect } from "react"; function Hello() { // useEffect runs function // and reapeat it every time the dependencies(inside []) changes useEffect(() => { console.log("Hi :)"); return () => { console.log("bye :("); } }, []) // same meaning another ver. // useEffect runs functio.. 2023. 1. 11.
[ReactJS] useEffect() 지난시간에 공부한 내용의 연장선상이지만, 리액트는 특정 원소가 변했을 때만 반응할 수 있게 우리를 도와준다. 다음 코드를 살펴보자 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState("") const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); console.log('I run all the time'); // useEffect helps us to call a .. 2023. 1. 11.
[ReactJS] useEffect 이전에도 다룬적이 있지만, useState()를 사용하면 modifier 함수를 불러올 때마다. 부모의 component 즉, 밑의 코드에서 App을 rerendering하게 된다. 그러나 API의 사용 등의 과정이 이 component사이에 껴 있으면, 다른 것을 update하는 과정에서 매번 API를 불러와야하는 불편한(?) 상황이 생길 수 있다. 이를 막기 위해 리액트는 useEffect를 제시한다. 다음 코드를 살펴보자 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); co.. 2023. 1. 10.
[ReactJS] Prop Types 지난 시간에는 함수의 인수처럼 React는 Component를 불러올 때 인수를 전달할 수 있다고 배웠다. 이번 시간에는 만약 이러한 인수가 잘못된 형식으로 전달되면? 에 대한 질문이다. 지극히 인간적 관점인 것이, 개발을 하다보면 이런 실수를 자주 하게 되기 때문이다. 애석하게도 리액트는 이를 '잘못된 문법' 이라 우리에게 알려주지 않는다. 왜냐하면 엄밀히 말해 이는 틀린 문법이 아니라 잘못 말한거기 때문이다. 영어 스피킹을 할 때 문법은 맞는데 안에 내용이 다 틀린 그런 느낌? 'Hello I am kurooru' 라고 말할려 했는데 'Fxxk U'라고 말한 느낌이다. 후자도 절대 틀린 문법은 아닐것이다. 그러나 전달할려고 하는 의미는 완전히 틀렸다. 인간이기 때문에 일어나는 지극히 인간적 오류다. .. 2023. 1. 9.
[ReactJS] memo 리액트에서 useState() 매서드를 사용하면, 변화하는 부분만 HTML에서 쏙쏙 빼와 변화시켜준다는 점을 공부한 적이 있다. 그러나 useState의 modifier 함수가 변화할 때 부모 컴포넌트를 모두 변화시키면 조금은(?) 어쩌면 많이 비효율적인 생산 방식으로 빠질 수도 있다. 다음 코드를 살펴보자 이코드는 완성된 코드지만, 만약 App() 컴포넌트에서 MemorizedBtn을 사용하지 않았다면, 첫 번째 버튼의 property만을 변화하고 싶은 시점에서 두 개의 버튼 모두 변화시켜버리는 현상이 일어날 것이다. 이는 한두개의 버튼만을 이용하여 구현하는 사이트라면 상관없겠지만, 수백 수천개의 버튼을 사용하는 사이트(있을라나,,?)를 생각하면 비효율적일 수 있다. 따라서 React는 memo 매서드.. 2023. 1. 9.
[ReactJS] prop 리액트는 UI 내에서 같은 작업을 반복할 때 이를 좀더 간편하게 처리해 준다. 다음 코드를 살펴보자 여느때와 마찬가지로 initial render와 함께 시작하고 App 컴포턴트를 root 내에 담아준다. 그리고 App 컴포넌트는 Btn 컴포넌트를 두 번 작동시키는데, 이 때에 중요한 점은 인수를 안고 넘어간다는 것이다. 첫 Btn의 경우 banana라는 키에 Save Changes라는 값 그리고 big이라는 키에 true라는 값을 갖고 넘어가며, 이에 따라 버튼에 쓰여질 내용, 그리고 글씨 크기가 정해져 첫 버튼이 print된다. 그리고 두번째 Btn의 경우 banana라는 키에 Continue라는 값 그리고 big 이라는 키에 false라는 값을 갖고 넘어간다. 마찬가지로 이에 따라 버튼에 쓰여질 내.. 2023. 1. 9.
[ReactJS] prop에 대한 이해 다음 코드의 흐름을 이해해보자 이전과 마찬가지로 브라우저는 initial rendering을 실행하고 App함수를 root id 안에 렌더링한다. 살펴볼 것은 사용자가 Flip 버튼을 눌렀을 때 일어나는 일이다. Flip 함수를 click하게 되면 onClick 반응에 의해 onFlip 함수가 실행된다. onFlip 함수는 reset 함수를 실행하고, setFlipped함수를 실행하는데, reset함수는 입력받은 값들을 0으로 되돌리는 함수이다. 그리고 setFlipped함수는 current 즉 flipped의 스위치를 끄고 키듯 true와 false로 변환시킨다. 여기서 current가 flipped에 해당하는 이유는 useState() 매서드를 사용했기 때문에 둘은 연동되어 움직인다. 그러면 flip.. 2023. 1. 8.
[ReactJS] input, form HTML에서 정보를 받아오기 위해서는 form과 input태그를 사용해야 했다. React에서도 기본적인 개념은 이용하지만, 훨씬 간편한 방법으로 사용자가 제공한 정보를 가져올 수 있다. 다음 코드의 흐름을 살펴보자 애플리케이션이 시작됨과 동시의 initial render가 실행된다. 그리고 input박스를 통해 user에게 정보를 요구한다. user가 정보를 넣는 순간 ( == onChange) onChange함수가 실행되고, 이 함수는 바뀐 순간의 상황 (여기서는 임의로 event라고 정의)의 target.value즉, 사용자가 넣은 숫자를 minutes에 넣어 rerendering시킨다. 이에 따라 UI는 업데이트되고 h4태그 내에 있는 minutes는 사용자의 입력값이 변할 때마다 업데이트된다. 2023. 1. 7.
[ReactJS] React.useState() 지난번에 rerendering의 중요성에 대해 배웠다. 리액트는 고맙게도 이 과정마저 React.useState()를 통해 간편화시켜준다. function App () { // unpacking const [counter, setCounter] = React.useState(0); const onClick = () => { // modifier rerenders component itself setCounter(counter + 1); } return ( Total clicks: {counter} Click me ) } 주목할 부분은 윗 부분인데, React.useState(0) 는 변수와 함수를 만들어낸다. 그리고 각각은 [] 즉 리스트로 변환가능하다. setCounter의 역할은 앞 변수를 받아 이를.. 2023. 1. 7.
[ReactJS] render, rerender 다음 코드의 흐름을 살펴보자 이 코드는 HTML을 사용자가 버튼을 누를 때 마다 클릭한 횟수를 사용자에게 보여주게 만든다. 중요한 것은 코드의 흐름인데, 정의한 함수들은 실행되지 않는 한 JS는 무시하고 내려간다. 최초의 render은 initial render. 이 때의 cnt 값은 0을 갖는다. 그리고 이상태에선 아무리 버튼을 눌러도 내부에 cnt만 올라갈 뿐 UI 상에서의 변화는 없다. 따라서 이를 반영해 주기 위해선 rerendering 즉 다시 render을 하는 과정이 필요하다 이것이 function rerender()과, countUp()을 하는 순간 이를 호출하는 것이다. 기억하자 rerender()이 없으면 UI는 변하지 않는다. 또한 리액트가 대단한 점은, rerendering 시점에서.. 2023. 1. 5.
[ReactJS] JSX 문법 JSX에서 element를 만들 때에는 함수 형식으로 만들어 이를 return 즉 반환하는 형태로 나타낸다. function Title() { return ( console.log("mouse enter")}> Hello I'm a title ); }; // arrow function const Button = () => ( console.log("I am clicked!")} > Click me ); const Container = () => ( // the first letter of component should be upper case // lower case -> HTML tages // upper case -> React component ); 위와 같이 일반 함수와 화살표 함수 둘 다 모두 .. 2023. 1. 5.
[ReactJS] JSX 문법과 babel 설치하기 일반적인 JS문법을 좀더 사용하기 편리하게 한 버전을 JSX문법이라고 한다. 그리고 이러한 문법을 그대로 js로 사용하면 당연히 브라우저가 못알아듣기 때문에 다음과 같은 설치가 필요하다. 집중해야 할 부분은 아랫 부분인데, bable에서 제공하는 JSX신텍스 해독기와 매 script마다 type="text/label"을 넣어줘야하는 번거로움이 있다. 2023. 1. 5.
[ReactJS] React에서 EventLister 구현하기 React가 강력한 도구라는 것은, vanila JS에서 모든 Event에 addEventListener을 달아 반응해야 한다면, properties를 이용하여 이를 간단하게 구현할 수 있다는 점이다. 2023. 1. 4.

티스토리툴바