반응형 React11 [REACT] 리액트 Component Life-Cycle과 React Hooks 리액트의 컴포넌트 생명주기 모든 리액트 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다. 함수형과 객체 컴포넌트의 각 생명주기와 기능들을 알아보자. 1. Class Component 마운트(mount) 컴포넌트가 생성 될때 발생하는 생명주기 1) constructor 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드 this.props, this.state에 접근이 가능하고 리액트 요소를 반환한다. 2) getDerivedStateFromProps props로부터 파생된 state를 가져옵니다. 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용한다. 3) render 컴포넌트를 렌더링하는 메서드 내부에.. 2023. 9. 10. React-redux를 사용한 게시판 만들기 with Example code 난이도 (실습 난이도 : 하, 소요시간 : 30min±) 실습 설명 오늘은 React-redux를 사용해서 게시판을 만들어볼 것이다. 사용할 컴포넌트는 기본으로 제공되는 App.jsx와 Post, Add, Find, Store를 새로 생성해서 사용할 것이다. 실습 먼저 컴포넌트를 생성하고 App.jsx에 import해주자. 하는김에 React-redux를 사용 할 것이기 때문에 store생성, Provider도 같이 감싸주겠다. [App.jsx] import { Provider } from "react-redux"; import { createStore } from "redux"; import "./App.css"; import Add from "./components/Add"; import Post f.. 2023. 1. 29. React-redux를 사용하는 이유와 사용하는 방법 with Example 취업 후 열심히 배우고 일하느라 오랜만에 글을 쓴다. 회사생활이 너무 재미있어서 시간을 녹여버리고 있다. 어쨋든 Redux의 사용 이유 오늘은 React와 찰떡궁합 React-redux를 알아보자. 기존의 props를 과다 사용해서 프로젝트를 만들다보면 여러 컴포넌트가 쌓이고 쌓일수록 굉장히 복잡해지게 된다. 예를들어서 아래와 같이 export default function App() { const [number, setNumber] = useState(0); return ( App number : {number} { setNumber(number + 1); }} /> ); } function Calculator1(props) { return ( Calculator1 ); } function Calcul.. 2023. 1. 28. UseEffect, Props를 사용한 시계만들기 with Example code (실습 난이도 : 하, 소요시간 : 20min±) 이번엔 useEffect Hook과 props기능을 사용해서 만들수 있는 기초적인 시계를 만들어보자. 먼저 App.js에서 기본적으로 버튼과 그 버튼으로 켜지고 꺼질 수 있는 시계기능을 코딩해보자. App.js import React,{useState} from 'react'; import Time from './components/Time' function App() { const [showTime,setShowTime] = useState(false); return {showTime && } {setShowTime(!showTime)}}>Time Toggle } export default App; 가장 먼저 button을 생성하고 useState를 사.. 2023. 1. 27. Hooks - useEffect useEffect도 React 작업을 할때 자주 사용하는 Hook이다. useEffect의 기능은 내가 원할때 동작, 기능을 실행 할 수 있게 하는 것이다. 그럼 어떨때 사용할 수 있는지, 어떻게 사용하는지 살펴보자. 1. useEffect를 가진 Component가 mount 되었을 때 실행 useEffect(() => { console.log("mount 성공"); }, []); 이 처럼 작성하면 Component가 mount된 최초에만 실행된다. 작성한 예시를 살펴보자. import React,{useState, useEffect} from 'react'; function App() { const[number,setNumber] = useState(0); useEffect(()=>{ console... 2023. 1. 26. React와 useState를 사용한 숫자입력기 Sample (실습 난이도 : 하, 소요시간 : 20min±) 먼저 해당 실습은 React와 useState를 연습하기 위한 단순실습으로 css 디자인이나 대단한코드는 사용되지 않을 것이다. 먼저 Create-React-App으로 React폴더를 생성해보자. 시작하기 앞서 기본셋팅된 값들을 지워주자. [App.js] import './App.css'; function App() { return } export default App; App.js는 이렇게 나머지는 지워주고 App.css와 index.css의 내용들은 전부 지우고 시작한다. npm start를 했을때 웹에 아무것도 안나와야 정상이다. 첫 실습이니 만큼 쉽고 간단한 계산기를 만들어 보자. import './App.css'; function App() { .. 2023. 1. 25. React_ Props 사용법, example React를 사용할때 Components를 나누고 서로 다른 Components File에서 작업을 하면 서로의 값이 필요할 순간이 항상 있다. 이때 React에서는 props를 이용해서 값을 주고 받는데, props에 대해서 공부해보자. [[App.js]] import './App.css'; import {useState} from 'react'; import Components from './components/Components' function App() { const [count,setCount] = useState(0); function onClickHandler () { setCount(count + 1); } return +1 } export default App; [[Components... 2023. 1. 24. Hooks - useState useState는 React를 사용함에 있어 매우 중요한 Hook이다. 여기서 Hook이란 아주 쉽게 React에서 사용할 수 있는 추가기능이라고 할 수 있다. 그럼 useState는 왜 쓰는것이며 기능이 무엇인지 살펴보자. let string = "ABC"; 이렇게 string이라는 변수가 있다고 가정해보자. let string = "ABC"; string = "DEF"; 우리는 JavaScript, 코딩공부를 할때 변수를 바꾸려면 이렇게 해야한다고 알 것이다. 하지만 이런 방식으로 변수를 바꾸게 되면 이미 랜더링 된 WebSite는 바뀐 변수를 인지하지 못하고 "ABC"만을 표출할 것이다. function True() { let contents = true; if(contents = true){ re.. 2023. 1. 23. 리액트를 사용하는 이유, 장점 1. SPA, CSR을 사용하는 동적 웹페이지 우리가 많이 사용하는 WebSite Naver, Instagram에는 서로 다른 차이점이 있다. 위 Gif를 보다보면 느낄 수 있는데 Naver의 경우 제공하는 다른 서비스를 선택하면 웹이 새로고침 되며 주소가 바뀌고 모든 내용들이 랜더링 된다. 하지만 Instagram의 경우 바뀔필요 없는 내용들은 그대로 두고, 새로고침도 할 필요가 없다. 변경되어야할 필요한 부분만 랜더링 된다는 것이다. 이 기술을 바로 SPA(Single Page Application), CSR(Client Side Rendering)라고 한다. 이것의 장점은 사용자가 웹에 최초 접근 시 페이지의 정보들을 한번에 로드하게 되고 페이지 내에서 이동 할 때 다시 로딩하거나 데이터를 사용하는.. 2023. 1. 23. 리액트를 처음 접했을때 다루는 방법 CRA로 React App폴더를 만들었다면 진짜 React 코딩을 시작해야 한다. 처음 React App폴더를 만났을때 어떤파일을 건드려야 하는지, 내가 어떤 파일에 코딩을 해야하는지 몰라서 당황했다. 아무것도 안했는데 이렇게 복잡한 파일구조를 만나면 당황했던게 당연하다. 우선 가장 기본적인 ‘index.html’ 파일을 열어보자. HTML과 Javascript를 배웠다면 이해할 수 있을 내용들이다. 'root'라는 ID를 가진 div가 하나 생성되어 있고 React App이라는 이름의 웹이 만들어져 있는 것을 말이다. 우선 React App을 실행해보자. User@DESKTOP-GGSDAF7 MINGW64 ~/Documents/Velog/CRA/my-app (main) $ npm start 터미널에 위.. 2023. 1. 23. CRA로 React App 만들기 React를 처음 시작할때 CRA없이 시작한다면 시간을 지체할 수 밖에 없다. 또, 이미 React를 활용하고 있는 사람에게도 새로운 Project를 시작할때 CRA는 정말 효율적이다. CRA란 Create-React-App의 약자로 React 공식웹에서 제공한다. 먼저 React Website에 접속해보자. https://ko.reactjs.org/ 접속하면 위와 같은 Web으로 접속되는데 붉은색으로 표시해놓은 '시작하기'를 눌러보자. 시작하기에 잘 접속이 되었다면 우측에 표시해놓은 '새로운 React 앱 만들기'를 눌러보자 이제 다 한것이나 다름없다. 하단에 추천 툴체인의 'Create React App' Link가 보이는데 누르게 되면 바로 아래쪽 Create React App 으로 이동하게 된다... 2023. 1. 23. 이전 1 다음 반응형
