react9 [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] 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] Prop Types 지난 시간에는 함수의 인수처럼 React는 Component를 불러올 때 인수를 전달할 수 있다고 배웠다. 이번 시간에는 만약 이러한 인수가 잘못된 형식으로 전달되면? 에 대한 질문이다. 지극히 인간적 관점인 것이, 개발을 하다보면 이런 실수를 자주 하게 되기 때문이다. 애석하게도 리액트는 이를 '잘못된 문법' 이라 우리에게 알려주지 않는다. 왜냐하면 엄밀히 말해 이는 틀린 문법이 아니라 잘못 말한거기 때문이다. 영어 스피킹을 할 때 문법은 맞는데 안에 내용이 다 틀린 그런 느낌? 'Hello I am kurooru' 라고 말할려 했는데 'Fxxk U'라고 말한 느낌이다. 후자도 절대 틀린 문법은 아닐것이다. 그러나 전달할려고 하는 의미는 완전히 틀렸다. 인간이기 때문에 일어나는 지극히 인간적 오류다. .. 2023. 1. 9. [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] React에서 Element 만들기 React와 vanila JS의 궁극적인 차이점은 React가 vanila JS와 정확히 반대 방향으로 일을 처리한다는 점이다. vanila JS가 HTML에서 태그를 만들고 이를 queryselector이든, getElementById이든 무언가를 grab하여 가져오는 방식이라면, React는 태그를 만드는 순간부터가 하나의 React언어로 작동한다. 2023. 1. 4. [ReactJS] React 설치하기 리액트는 JS와 달리 기본적으로 모든 브라우저에 깔려있지 않다. 따라서 다음 코드를 HTML에 import 해주며 사용해야 한다. 이와 같이 리액트를 import 했으면, 콘솔창에 React를 타이핑하여 제대로 설치가 되었는지 확인하면 완료 ! 2023. 1. 4. 이전 1 다음
