React.JS24 [React.js]명령어로 리액트 프로젝트 생성하기 리액트 프로젝트 설치 전에 다운로드해야할 프로그램들 Node.js npm ( Node Package Manager) Node.js https://nodejs.org/ko/download/ npm $ node -v npm 으로 진행할 경우 아래의 명령어를 실행 npx create-react-app hello-react OR yarn https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com yarn으로 진행할 경우 아래의 명령어를 실행 yarn create react-app hello-react 프로젝트가 있는 경로로 이동하기 .. 2023. 12. 3. [React.js]아코디언 메뉴 만들기 가이드라인이 적인 페이지를 만드는데 너무 밋밋해서 아코디언 기능을 넣기로 했다! 아래 사진의 질문, 답변은 임시텍스트를 아무거나 붙여놓음.. 위의 네모박스로 체크해둔 부분을 아코디언으로 구현하기로 했고 위의 HTML, CSS는 아래와 같다. 여기서 useCallback을 사용하면 함수가 렌더링마다 재생성되지 않으며, 의존성 배열을 사용해서 해당 배열의 값이 변경될 때만 handBtnClick함수가 다시 생성된다. 또한 직접함수를 선언하면 메모리에 여러 함수 인스턴스가 생성될 수 있지만,useCallback을사용하면 함수 인스턴스가 최소화 되어 메모리 사용량을 줄일 수 있다. 왜냐하면 useCallback을사용하면 함수 인스턴스를 재사용하기때문! 근데!! 위에처럼 엄청 간단한 코드는 많은 메모리를 사용하지.. 2023. 11. 6. [React.js]구조설계 --스크랩 https://velog.io/@_seeul/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%A7%84%ED%96%89%ED%95%A0%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%9E%A1%EB%8A%94%EA%B2%83%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C React | 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?🤔 리액트 초기세팅 후 컴포넌트 구조 설계하기 🧸 velog.io 매번 프로젝트 생성할 때 마다 .. 2023. 9. 25. [React]App.css VS index.css 결론부터.. 현재 코드를 작성하는 폴더의 이름과 같은 css 파일이 가장 바람직함. 개인적인 의견으로는 연습용 코드작성이라면 index.js보다는 App.js로 하는게 낫다. App.js는 프로젝트 진행시 서버 설정 / 미들웨어 정의 / 라우트 정의/인증 등 여러가지를 설정하고, (App의 상위 파일인) index.js는 index.html과 연결하여 화면에 렌더링을 하는 역할을 하기 때문에 대부분의 작업은 컴포넌트 -> App.js로 연결 -> index.js가 App.js를 import -> index.html와 연결되어 화면에 렌더링 하기때문에 실제로 index.js에 직접 화면 구현을 위한 코드를 짤 일이 많지 않기 때문.. 관련 블로그글 : https://pink1016.tistory.com/8.. 2023. 9. 15. [React.js]cmd 창으로 react프로젝트 옮기기 커맨드창으로 리액트 프로젝트를 생성했는데 갑자기 디렉토리가 마음에 안들었다.. 우선 프로젝트 생성할 때는! https://www.jetbrains.com/help/phpstorm/react.html#install_react_in_empty_project 암튼..cmd를 이용해서 명령어로 디렉토리를 이동할 때는! cd C:\Users\react_test 리액트 파일이 있는 경로로 이동 move * "C:\Users\Desktop" 바탕화면으로 옮기고 싶어서 Desktop으로 옮김 //Windwos 기준 mv * ~/Desktop/ //macOS 기준 *** 근데 위에처럼 옮기면 프로젝트의 개별 파일들이 바탕화면에 흩뿌려진다... 프로젝트 폴더를 만들고나서 이동하는것을 잊지않도록... 2023. 6. 7. [React.js]Redux 적용하기 Redux에 대해서 먼저 알아보자! Redux는 전역 상태를 관리하기 위한 단일 스토어를 사용하는 라이브러리. 앱에서 일어난 일을 기반으로 일반 객체 액션을 스토어에 디스패치하여 상태를 업데이트 한다. 이 과정에서 불변성을 유지하면서 업데이트된 상태를 반환하는 순수 리듀서 함수를 사용한다. ( 리듀서 / Reducer는 현재상태와 액션을 받아서 다음 상태를 반환하는 순수 함수. ) Redux 코드에는 액션 생성자, 미들웨어, Thunk함수, 정규화된 상태, Reselect 라이브러리를 사용하는 메모제이션된 셀렉터 함수, Redux DevTools 확장 프로그램, TypeScript 타입 등이 포함 될 수 있다. ( 미들웨어 / Middleware는 액션을 디스패치/액션 객체를 스토어로 전달 했을 때 리듀.. 2023. 5. 7. [React]사용하지 않는 packages, dependencies 삭제하기! 작업하다가 원하는 기능 구현이 안되서 검색해보면 해당 라이브러리들이 존재하는 것을 뒤늦게 발견하는 경우가 많았다..!! carousel, dropdown 등 등.... 암튼 무지성 라이브러리 다운로드 결과 package.json 파일이 정말 마음에 안들었다.. 안쓰는 애들 들어가라! 1. 2. 그리고 root directory로 이동하자 3. 터미널창에 depcheck 입!력! 4. 자 이제 depcheck가 요렇게 알려준다 그럼 저 리스트들을 보고 삭!제! 5. 삭제후에 npm install을 해줌으로써 프로젝트에서 종속성을 없!앰! 이는 해당 패키지들이 불필요한 파일의 크기를 늘리고 프로젝트의 실행 속도를 저하시킬 수 있기 때문에 해주는 과정임. 아참 이거 한번 보고 가자! 2023. 4. 10. [React]Redux Tookit Redux는 상태 관리 라이브러리!! 내가 이번에 진행하며 사용한 것은 Redux가 아니고 Redux toolkit임. redux를 사용하면서 반복적으로 작성해야했던 설정코드들을 간소화하여 더 쉽게 사용할 수 있도록 도와줌. 또한 toolkit은 코드의 무결성을 보장해주는 immer 라이브러리와redux-thunk 미들웨어 등을 기본적으로 제공하므로 더 쉽게 상태 관리를 할 수 있다. 상태를 한 곳에서 관리하면 여러 컴포넌트에서 상태를 쉽게 처리할 수 있다!! 따라서 코드의 일관성을 유지하며 유지보수하기가 좋다. 대용량 데이터 처리에 많이 사용됨. ( 데이터 전달을 하는 방법에는 props사용도 있지만 특정 데이터 전달을 담당하여 약간의 차이가 있다. 그리고 Redux는 사용하기 위해서 props보다 조.. 2023. 3. 31. [React]불필요한 렌더링 방지하기 feat.React.memo 검색 API를 이용해서 검색 결과를 봐야하는데!! 와...결과가 뜨자마자 계속 사라졌다. 왜인가 싶어서 콘솔에 찍어보니까 한번 로딩했는데 저렇게 수많은 렌더링이 됐다. 이때 사용한것은 React.memo 파일 구조가 한 파일에 두 개의 컴포넌트가 있어서 그런가 했는데 그게아니라 상위 컴포넌트가 다시 렌더링되어 하위 컴포넌트도 다시 렌더링되는 결과인 것 같다. 이러한 동작은 React의 기본 렌더링 프로세스의 일부로, 상위 컴포넌트의 다시 렌더링이 속성 변경 없이도 하위 컴포넌트의 다시 렌더링을 트리거하여 발생한다고 한다. 흑흑 아무튼 해결방법으로 React.memo를 사용하여 SearchBooks 컴포넌트를 래핑함으로써 React에게 컴포넌트 속성의 얕은 비교를 수행하여 다시 렌더링이 필요한지 여부를 결.. 2023. 3. 29. [React] props, 인수, 커스텀 훅 간단 비교 이게..왜 자꾸 헷갈리는지 모르겠는데...종종 혼란스럽다.. 그래서 찾아봄! Props (Properties) React 컴포넌트에서 사용되는 데이터를 전달하는 방법. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 name이라는 데이터를 전달하려면 아래처럼 사용한다. 함수의 인수 (Function arguments) 일반 JavaScript 함수에서 매개변수를 전달하는 방법. 함수를 호출할 때 인수를 전달하여 함수 내에서 해당 값을 사용할 수 있다. 위 예제에서 greet 함수는 name이라는 매개변수를 가지고 있으며, 함수 호출 시 해당 인수를 전달. 커스텀 훅(Custom Hooks) 커스텀 훅은 보통 use 접두사로 시작하는 이름을 .. 2023. 3. 23. [React]Function components cannot be given refs.에러 styled component태그에 ref객체 사용하니까 마주친 에러!! Ref (Reference)는 React에서 사용되는 특별한 객체로써 DOM 엘리먼트나 클래스 컴포넌트 인스턴스에 접근할 수 있게 해준다. 일반적으로 React에서 데이터는 상위 컴포넌트에서 하위 컴포넌트로 전달되지만, Ref를 사용하면 컴포넌트의 인스턴스나 DOM 엘리먼트에 직접 접근할 수 있다. 이를 통해 DOM 엘리먼트의 속성을 수정하거나, 클래스 컴포넌트의 메서드를 호출할 수 있다. 아무튼..저 오류가 발생한 이유는 styled-compoment가 함수 컴포넌트 이기 때문에 ref를 할당할 수 없기떄문. 해결하기 위해서는 React.forwardRef()를 사용해야한다. 위 코드에서는 React.forwardRef()를 사용.. 2023. 3. 23. [React]커스텀 훅의 업데이트가 함수형 컴포넌트에 반영되지 않을 때 에러 원인: 커스텀 훅 useSearchReviews의 함수인 handleSearch 함수가 인수를 받지 않고, 내부의 setSearchResults 함수를 사용하여 상태를 업데이트함. 따라서, Board 컴포넌트의 searchResults 상태가 업데이트되지 않았다.! 에러 내용 : 커스텀 훅이 검색기능을 갖고 있고 이 결과를 컴포넌트에 불러와서 결과값을 보여지게 하는 것이 목표였다. 커스텀 훅 파일에서 console log로 확인한 결과 업데이트에 이상 무! 하지만 컴포넌트에서는 계속 업데이트가 되지 않고 값이 빈 배열로 리턴되었다;; Board - 게시판 페이지를 구성하는 메인 컴포넌트 이 컴포넌트는 페이지 상단에 이미지와 '글 쓰러 가기' 링크를 표시하며, Search 컴포넌트를 렌더링하고, 검색.. 2023. 3. 22. [React]props VS custom Hook feat.ContextAPI props와 커스텀 훅의 주요 차이점은 props가 부모 컴포넌트에서 자식 컴포넌트로 명시적으로 전달되는 반면, 커스텀 훅은 컴포넌트 내에서 또는 여러 컴포넌트 간에 상태 논리를 캡슐화하고 재사용하는 데 사용된다. 커스텀 훅은 또한 useState와 useEffect와 같은 React 내장 훅을 사용하여 상태와 부작용을 관리할 수 있으며, 이는 컴포넌트의 논리를 단순화하고 재사용성을 높일 수 있다. // Parent.js import React from 'react'; import Child from './Child'; function Parent() { const data = { name: 'John', age: 30 }; return ( ); } export default Parent; // Chil.. 2023. 3. 21. [React]ReactRouterDomV6 --스크랩 https://velog.io/@soryeongk/ReactRouterDomV6 [React] react-router-dom v6 업그레이드 되면서 달라진 것들 react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도.... velog.io 버전 5와 6을 알아보기 쉽도록 잘 정리해주셨다!! 2023. 3. 12. [React]firebase 연동하기 firbase 9버전은 ...검색결과가 많이 없어서 선생님과 같은 버전인 8로 진행했다. npm 터미널 창에 npm install firebase@8.10.0 입력 ㄱㄱ src 디렉토리에 firesbase.js import firebase from "firebase/app"; const firebaseConfig = { apiKey: ////, authDomain: ////, projectId: "the-unbook-club", storageBucket: ////, messagingSenderId: ///, appId: //// }; export default firebase.initializeApp(firebaseConfig); 연결이 잘 되었는지 확인하려면 콘솔창에 찍어보면 된다. App.js에 해도.. 2023. 3. 12. [React]JS vs JSX JSX문법을 쓰긴하는데...확장자도 JSX로 해야하는지... 그냥 JS로 둬야하는지 궁금해서 스택오버플로우에 검색해봤다. https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx ReactJS - .JS vs .JSX There is something I find very confusing when working in React.js. There are plenty of examples available on internet which use .js files with React but many others use .jsx files. I have read abou... stackoverflow.com 결론 : 장단점이 있다. 니가 알아서해라 JSX.. 2023. 3. 10. [React]컴포넌트 파일 생성하기 데이터 파일, 컴포넌트 생성 파일을 따로 생성해서 아~주 간단한 거 구현해보는 시간!! 컴포넌트 : 갯수가 많거나 변동이 잦은 데이터 조절을 위해서 ..쉽게말하면 축약어 설정해주기 정도로 이해하면 될지 않을까.. props: 부모에서 자식 컴포넌트 사이에 데이터 이동을 위한 것!! 형제요소끼리 안됨. 자식->부모 안됨. 무조건 부모-> 자식만 가능 먼저 소스코드부터 보시죠 //App.js import logo from './logo.svg'; import 'bootstrap/dist/css/bootstrap.min.css'; import { useState } from 'react'; import { Button, Navbar, Container, Nav, Row, Col} from 'react-boot.. 2023. 2. 9. [React]Component 문법, 동적 UI, map 함수 HTML양이 너~무 많아서 깔쌈하게 코드를 짜고 싶을 때 사용. Component 를 만들면 관리가 편해지기때문에 ~ 반복출현하는 HTML 덩어리들 자주 변경되는 HTML UI들 다른 페이지 만들 때도 컴포넌트로 만듦 하지만 많이 만들면 state 사용시 복잡해짐 상위 component에서 만든state를 쓰려면 props 문법을 이용해야함. Component를 만들 때 대문자로 시작으로 해야함!! Component 사용하려면?? 1.함수만들고 이름짓기 2. 축약을 원하는 HTML 넣기 3. 원하는 곳에서 return 소괄호안에 있는 건 태그하나로 묶여야한다. return 안에는 한개의 태그만 들어갈 수 있음!!!!!!! return()내부에 혹시 div 태그가 필요없다면 의미없는 div 태그 대신 태그.. 2023. 2. 7. [React]useState() 함수 useState()함수 : 자료를 일시적으로 저장하는 함수!! 변수랑 뭐가 다르냐면!! 보관한 데이터로 데이터바인딩을 했을때~ 데이터가 변경되면!! 해당 HTML이 재렌더링 된다. JS처럼 일일이 코드 안짜도 됨. 그냥 변수는 데이터가 바뀌어도 재렌더링 되지 않음. 배열의 데이터들을 변수로 쉽게 저장할 수 있는 자바스크립트의 destructuring 문법을 이용한 것!! 예를들어 let array = ['Han', 20] 이라는 배열에 변수를 생성하고 싶다면 let [name, age] = ['Han', 20] 이렇게 코드를 짜는것이 destructuring 문법 같은 원리로 useState() 함수를 호출하면 [data1, data2]가 생성되는데 저기에 각 변수를 생성하는것. 매일 발행되는 기사처럼 .. 2023. 2. 4. [React]아주 간단한 JSX 문법+ 딱 세 개 있음 JSX 문법이 간단하다는게 아니라.. 게시글이 매우 간단.. 우선 JSX는 JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. 정식 문법은 아니다. 그리고 JSX문법 덕분에 우리가 HTML을 js로 쓸 수 있는것! 고맙다 JSX야! css는 똑같이 적용하면 된다. createElement() JSX를 사용하면 JavaScript로 HTML 요소를 작성 하고 appendChild()메서드 없이 DOM에 배치할 수 있다. JSX는 HTML 태그를 react 요소로 변환해준다. 이건 JSX문법을 사용했을 때 const myElement = I Love JSX!; const root = ReactDOM.createRoot(document.getElementById('ro.. 2023. 2. 4. [React]js파일에서 HTML자동완성 설정하기 feat.Emmet Emmet은 HTML과 CSS의 작성의 시간을 단축 시켜주는 에디터 확장기능. (자동완성 해줌ㅋ) HTML/CSS에서는 잘 작동을 하지만 js파일에선 작동을 안하는데... 이때 F1 버튼을 누르고 저 괄호 안에다가 "emmet.includeLanguages": { "javascript": "javascriptreact" }, 이거 복붙해서 저장 (ctrl + s) 짠 이제 잘 나온다. 저 코드가 뭔데 ... 작동을 하게 해주지? Emmet은 다른 언어에 대한 정보가 없어서 우리가 직접 설정해야 한다고 한다.. 알고가면 좋은 단어 : include - 포함하다 코드를 직역하면..에멧아... 자바스크립트를 포함해다오..라고 대놓고 요구를 하네.. 이런 직관적인 코드 아주 환영한다. 출처: https://co.. 2023. 2. 4. [React]이벤트 다루기,onClick 값 변경 onClick 이벤트 값 설정 리액트에서 onClick을 적용하려면!! (클릭하면 실행될 내용 설정) onClick = {클릭될때 실행할 함수} onClick = { () => {실행할 내용}} /*괄호안에 표현식을 바로 사용할 수 없기 때문에 콜백함수 혹은 Arrow function를 만들어 사용*/ 클릭시마다 1 증가시키기 이때 역시 useState를 사용하는데 데이터가 아닌 대체할 데이터!! 를 사용해야한다. 위와 같은이유로 useState 함수에 기본값이 [데이터, 데이터변경 값]으로 구성되어있음 값 변경시 꼭!!!!! 변경 값을 사용하자!!! 또한 state 변경함수로 변경해야 재렌더링이 잘 일어남 수정된 [데이터]를 만든다 -> newArray 기존 state 값을 복사 -> 나쁜예 (값 공유.. 2023. 1. 12. [React]태그에class 적용, 변수 대신 useState 태그에 class를 적용하고 싶으면 취업 대작전 class 는이미 javascript에 이미 존재하는 예약어이기 때문에 className을 사용한다. 데이터 바인딩 쉽게하는 법 (데이터를 HTML에 연결) {변수명, 함수 등}사용 {posts} {function()} src, id, href 등의 속성에도 사용 가능 데이터바인딩하는 다른 방법!! s t a t e (리액트 문법임) import React, {useState} from 'react'; 위와 같이 데이터는 1.변수에 넣거나 2.state에 넣으면 된다. 리액트의 내장함수를 사용. const [count, setCount] = useState(0); let [글제목, 글제목변경] = useState('뒤집어지게 맛있는 고깃집 추천'); 이런식.. 2023. 1. 12. [React]리액트 프로젝트 생성 Web-app 을 만들 때 가장 유용하게 만들 수 있는 라이브러리 1.모바일앱으로 발행이 쉬움 2.앱처럼 뛰어난 UX 3.비즈니스적 강점 하지만 문법이 어려우니 커피를 꼭 마시고 총명한 상태로 공부하자!! 설치방법 1.Node.js 검색 후 최신버전 설치 2. VScode 설치 3. 폴더 만들기 4. VScode 에디터에서 작업폴더 open 5.터미널로 리액트 프로젝트 생성 단계 ㄱㄱ 아래처럼 입력해도 되고 위에 처럼 입력해도된다 상관없음~ (5.ㅊㅓ럼 안해도 되고 VS실행을 한 후, 작업할 디렉토리에서 터미널창에 바로 npx create-react-app blog 쳐도된다. 여기서 blog는 프로젝트 이름이 blog일때임.) 6.npx create-react-app blog 을 터미널에 입력 npx는 .. 2023. 1. 12. 이전 1 다음
