리액트51 [웹개발] 자바스크립트 프레임워크 React와 Vue의 장점과 비교 React와 Vue 비교 리액트는 라이브러리이므로 비교적 자유도가 높은 반면 뷰는 프레임워크이므로 기능이 이미 다 정해져 있다 라이브러리 vs 프레임워크 라이브러리: 사용자가 필요할 때에 가져다 썼다가 뺐다가 할 수 있고 부분적으로 사용이 가능 (리액트) 프레임워크: 부분적 사용이 불가능하고 프레임 워크의 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작 (뷰) 예시 자유도가 높은 React, 정해진 방식대로만 하면 되는 Vue 리액트: 여러가지 방법중 마음에 드는것을 선택해 개발 (자유도가 높음) 뷰: 해당 기능을 개발하는 방법이 정해져있음 (프레임워크 문법을 따라야함) 1. 버튼을 화면에 안보이도록 만들기 리액트: && 연산자 방식, 삼항 연산자 방식 // 1. && 연산.. 2022. 11. 22. [Next.js] Next.js란? (리액트 단점, CSR, SSR 설명) Next.js 탄생배경 CSR을 사용하는 리액트의 단점때문에 이를 개선하고자 리액트 프레임워크 Next.js가 생겨났다 CSR이란? Client Side Rendering으로 클라이언트 즉, 웹브라우저가 화면을 렌더링해준다 웹브라우저에 내장된 JS 엔진이 동적으로 HTML 엘리먼트를 생성한 뒤 root element에 추가하여 웹 콘텐츠를 만드는 방식을 말한다 리액트의 단점 (CSR의 단점) 리액트에서는 브라우저가 페이지를 화면에 그려주고 서버에서는 해당하는 데이터만 받아오는 CSR(Client Side Rendering) 방식을 사용한다 즉 유저가 웹사이트로 이동한 그 후에 JS를 다운받고 리액트가 UI를 빌드한다 만약 사용자의 JS가 활성화 되어 있지 않거나 인터넷이 느려 JS 파일을 다운받거나 프로.. 2022. 9. 14. [리액트] 컴포넌트 렌더링시 useEffect 한번만 실행되도록 바꿔주기 리액트에서 컴포넌트가 렌더링되면 useEffect가 두번 실행된다. 이는 개발 단계에서 디버깅하기 편하라고 만들어준 자체 기능이기 때문에 엔드 프로덕트에서는 필요 하지 않고 개발시에만 사용된다. index.js index.js에 있는 태그는 리액트에서 컴포넌트가 마운트 될때 useEffect 함수를 2번 실행시킨다. 해당 태그는 리액트 전체에 디버깅을 위한 절차를 추가해주는 태그로, useEffect 의 이상동작을 감지하고자 2번 실행시키도록 설정되어져 있다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals .. 2022. 8. 23. [리액트] useContext 정리 useContext란? 특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 만든 값을 불러와서 사용할 수 있도록 해주는 Hook useContext의 장점 useContext가 없다면 상위 컴포넌트에서 생성한 데이터를 하위 컴포넌트에 전달하기 위해 해당 데이터가 필요하지 않은 여러 컴포넌트를 거치면서 props drilling 현상이 생긴다. useContext를 사용하면 해당 데이터가 필요한 부분에서만 값을 호출해 사용할 수 있다. 하지만 그렇다고 해서 항상 useContext 를 써야하는건 아니다. useContext는 여러 하위 컴포넌트에서 공유되어야 하는 값이 있을 때만 사용하는 것이고, 각 컴포넌트로별로만 관리하는 값이라면 그냥 useState 를 쓰는 것이 더 적절하다. us.. 2022. 8. 22. [리액트] useReducer 사용법 useReducer란? useReducer는 상태 관리를 담당하는 훅을 말한다 useState는 단순히 상태 관리를 해주는 훅이라면 useReducer는 해당 상태를 업데이트할때 유용한 Hook이다 useReducer는 useState를 통한 상태 관리 + 상태 추가, 제거, 수정 등의 핸들러를 하나의 함수로 사용할 수 있도록 해준다 기본문법 const [state, dispatch] = useReducer(리듀서 이름, 초기 데이터) state 데이터 state는 상태 즉 데이터다 useReducer 함수의 두번째 인자로 들어가는 초기 데이터를 1로 설정하면 state의 값도 1이 된다 즉 useReducer 함수에 등록한 초기데이터는 state로 접근할 수 있게 된다 dispatch 함수 state.. 2022. 8. 21. [리액트] 리액트에서 스타일 적용하는 5가지 방법 (인라인 스타일, CSS, SCSS, CSS Module, Styled-Components) 1. 인라인 스타일 App.jsx function App() { return } export default App 2. CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만들어야함 CSS 클래스가 중복되는 것을 방지하기 위해 1) 이름을 지을 때 특별한 규칙을 사용하거나 2) CSS selector를 활용한다 CSS 클래스 이름 짓는 2가지 방법 컴포넌트이름-클래스형태 i.e.) App-header BEM 네이밍: Block__Element-Modifier class="컴포넌트이름__역할—세부특징" i.e.) card__title-primary 컴포넌트 스타일로 css를 사용할시 단점 상위 컴포넌트에서 불러온 css 코드가 하위 컴포넌트에까지 영향을 미치기 때문에 컴포넌트마.. 2022. 8. 12. [리액트] props를 className으로 지정하기 App.jsx import Button from './components/Button' function App() { return ( ) } export default App Button.jsx className의 속성값으로 데이터 props가 오므로 백틱`` 안에 ${} 기호로 받아온 props를 넣어주면 class의 이름으로 지정된다. import React from 'react' import '../styles/Button.scss' function Button({ size, color }) { return ( 버튼 ) } export default Button Button.scss $main-color: green; .button { // 버튼에 먹여진 속성 제거 outline: none; bor.. 2022. 8. 12. [리액트] 리액트 프로젝트에서 기본적인 ESLint, Prettier, setting.json 설정해주기 1. 개발용으로 prettier, eslint-config-prettier 패키지 설치해주기 prettier: 코드 포매팅 eslint-config-prettier: eslint 와의 호환을 위한 패키지 yarn add --dev prettier eslint-config-prettier 2. .eslintrc 파일을 만들어 아래의 코드 추가해주기 extends: 누군가 미리 만들어놓은 규칙을 가져와서 사용하고자 할 때 명시하는 react와 prettier를 위한 코드 작성 규칙을 가져와서 사용 { "extends": ["react-app", "prettier"] } 3. .prettierrc 파일을 생성한 후 아래의 코드를 추가해주기 { "trailingComma": "all", "tabWidth":.. 2022. 8. 11. [리액트] useRef의 두가지 기능 정리 useRef의 두가지 기능 1. 요소 가져오기 자바스크립트에서는 document의 메소드(getElementById, getElementsByClassName, querySelector... 등)로 DOM 요소에 접근한것처럼 리액트에서는 useRef 훅으로 DOM 요소에 접근할 수 있다' 예제 아래의 코드에서 inputEl.current는 input 요소 를 의미한다. input에 등록한 name이나 input에 입력된 값 value를 ref를 통해 등록한 InputEl.current를 통해 접근할 수 있다. import React, { useEffect, useRef } from 'react' const GetElement = () => { const inputEl = useRef() useEffect.. 2022. 8. 10. [리액트] 리액트로 간단한 로그인 기능 구현하기 방법 1) onChange 사용 import React, { useState, useEffect } from 'react' const Login = () => { const user1 = { id: 'monalisa', pwd: '1234', } const [UserInfo, setUserInfo] = useState({ id: '', pwd: '', }) const validateUserInfo = e => { const { name, value } = e.target setUserInfo({ ...UserInfo, [name]: value }) } const isUser1Equal = e => { if (e.key === 'Enter') { user1['id'] === UserInfo['id'] &&.. 2022. 8. 10. [리액트] 리액트에서 이벤트 처리 (자주 사용하는 이벤트 핸들러 5가지) 1. 마우스 이벤트 onClick과 인자 전달 👉 onClick: 클릭하면 특정 함수가 실행되도록 하는 이벤트 핸들러 예시1) onClick 핸들러가 실행될때 즉 해당 요소를 클릭했을때 changeText라는 함수가 실행된다 import React from 'react' import { useState } from 'react' const Click = () => { const [text, setText] = useState('Hello') const changeText = () => { setText('Bye') } return ( { text } 클릭 ) } export default Click 예시2) 전달해주고싶은 인자가 있는 경우 화살표 함수를 핸들러에 바인딩한 후 인자로 넘겨준다 import .. 2022. 8. 9. [리액트] 클래스형 컴포넌트 라이프사이클 메서드 componentDidMount 예제 componentDidMount 문법 componentDidMount() { // 렌더링 시 실행될 코드 } 예제 import React, { Component } from 'react'; class Comp extends Component { constructor(props) { super(props); this.state = { num: 0 } } // 랜더링시 실행되는 메서드이므로 화면에 컴포넌트가 출력되기 전에 num의 state 값이 10으로 변경된다 componentDidMount() { this.setState({ num: 10 }); } render() { return ( // 최종 출력되는 num 값은 10이다 {this.state.num} ); } } export default Comp; 2022. 8. 9. [리액트] 라이프사이클 useEffect와 componentDidMount, componentDidUpdate, componentWillUnmount 비교하기 1. mount 컴포넌트가 브라우저에 렌더링될 때 실행 componentDidMount componentDidMount() { // 렌더링 시 실행될 코드 } useEffect와 빈배열 useEffect(컴포넌트가 브라우저에 렌더렝될때 실행할 함수, []); 2. update 컴포넌트 내부 특정 요소가 업데이트될 때 실행 componentDidUpdate componentDidUpdate(prevProps, prevState) { // 업데이트 되기 이전의 Props, State 값을 받아옴 // 업데이트 된 값과, 업데이트 되기 이전의 값을 직접 비교해서, 함수를 실행시킴 // 모든 props, state 값중 하나라도 변경사항이 있을 경우 실행할 코드를 이곳에 넣는다 if (this.props.num.. 2022. 8. 9. [리액트] 클래스형 컴포넌트에서 일반함수, 화살표 함수 사용하는 방법 방법 1) 화살표 함수 사용 클래스에서 화살표 함수를 사용하는 방식은 정식 클래스 컴포넌트 문법은 아니다 다만 일반 함수를 사용할 경우 bind를 해줘야하는 번거로움이 있기 때문에 자주 사용한다 import React, { Component } from 'react' class Count extends Component { state = { number: 0 } countUp = () => { this.setState({ number: this.state.number + 1 }) } render() { return ( { this.state.number } +1 ) } } export default Count 방법 2) 일반 함수 사용 정식 클래스 컴포넌트 문법은 constructor를 사용해 state.. 2022. 8. 9. [리액트] useEffect 훅을 사용해서 데이터 로딩 후에 실행하고 싶은 로직 구현하기 useEffect가 실행되는 시점 1. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 요소가 업데이트될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수); 2. mount (컴포넌트가 브라우저에 표시될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수, []); 3. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 특정 요소가 업데이트될 때) useEffect(배열에 있는 요소가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수 또는 State]); 4. unmount (컴포넌트가 사라질 때) useEffect(() => {return 컴포넌트가 사라지기 전에 실행할 함수}) 예제 imp.. 2022. 8. 5. [리액트] 라이프사이클이란? 함수형 컴포넌트에서 사용하는 라이프사이클 Hooks 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://wavez.github.io/react-hooks-lifecycle/ React hooks lifecycle diagram wavez.github.io 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드를 언제 사용할까? 컴포넌트가 처음 렌더링되었을때 특정작업을 하고싶을때 컴포넌트를 업데이트하기 전/후 특정작업을 하고싶을때 컴포넌트가 사라질때 특정작업을 하고싶을.. 2022. 8. 5. [리액트] 라이프사이클이란? 클래스 컴포넌트에서 사용하는 라이프사이클 메서드 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드.. 2022. 8. 5. [리액트] moment, moment-timezone 모듈을 사용해 현재시간, 다른 나라 시간 데이터 불러오기 패키지 소개 momentjs https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" momentjs.com 현재 시간 표시하기 (위치에 기반한 현재 시간) 1. 모듈 설치하기 yarn add moment 2. 해당 모듈 import 해오기.. 2022. 8. 5. [리액트] react-router-dom v6 사용법 ⚠️ 이 포스팅은 codevolution을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: React Router Tutorial React Router 라이브러리란? react-router는 특정한 주소와 컴포넌트를 연결시켜 주소 이동으로 다른 컴포넌트 화면을 보여줄 수 있도록 하는 라이브러리다. 1. react-router-dom 라이브러리 v6 설치하기 v6 다운받기 yarn add react-router-dom@6 가장 최신버전 다운받기 yarn add react-router-dom@latest 2. index.js에 BrowserRouter 적용하기 로 프로젝트에 라우터를 적용한다. 컴포넌트는 1) 사용자가 입력한 주소를 감지하는 역할 2) 여러 종류의 라우.. 2022. 5. 26. [리액트/에러해결] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` ⚠️ 에러내용 ❓ 에러발생이유 styled-components를 사용해 input 컴포넌트를 생성한후 input 컴포넌트 안에 자식 태그를 넣어주었다 추가하기 const Input = styled.input` max-width: 350px; min-height: 10vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd; `; ❗️ 해결방법 input 태그는 자식 태그를 가질 수 없기 때문에 태그를 감싸주고 싶다면 div를 사용해야한다 2022. 5. 13. 이전 1 2 3 다음
