FE/React8 [React] 함수형 컴포넌트 개념 정리(CRUD) 최근 백엔드 연동과정에서 강의를 듣다보면 예전 강의들은 클래스형 컴포넌트를 통해서 개발했던 것들이 많은데, 나는 함수형 컴포넌트를 이용해서 하는것을 배워서 직접 바꿔보았지만 헷갈리는 부분들이 많아서 function component React 개념을 한번더 정리&복습하기 위해서 백엔드없이, 따로 js파일을 만들지 않고 App.js에다가 하드코딩을 해보았다. Component App.js function App() { return ( WEB html css html Welcome Hello,WEB ) } export default App; 컴포넌트 생성 ------> function Header(props){ return WEB } function Nav(props){ return ( html css h.. FE/React 2022. 8. 22. [React] 클론코딩 react.js로 영화 웹사이트 만들기 여태까지 배웠던 React 이론+ react의 router 개념을 공부한후(이부분은 아직 잘 이해못했음) 영화 웹사이트를 만드는 클론코딩을 해보았다. react-router-dom 공식문서 참고 https://reactrouter.com/docs/en/v6/routers/router React Router | Router Declarative routing for React apps at any scale reactrouter.com 이번에는 단순하게 App.js 와 index.js만 가지고 만드는것이 아니고, 우선 npm(node package module)을 이용해서 react-router-dom도 설치했다. App.js 부분을 살펴보면, import { BrowserRouter as Router, .. FE/React 2022. 7. 28. [React] Coin tracker (coin paprika API) https://api.coinpaprika.com/ Coinpaprika api.coinpaprika.com 사이트에서 가상화폐인 코인의 정보를 가져올수있는 API가 있다. 이것을 react에서 실시간 시세를 출력해보는것을 만들어 볼 것 이다. 우선 이번에도 cra를 이용해서 기본 환경을 설정했다. useEffect를 사용해서 데이터를 딱한번만 불러오게 해주었다. (괄호안에 []에 어떠한 인덱스도 넣어주지않으면딱 한번만 불러올수있음. 브라우저 콘솔창을 봐보니깐 이쁘게 잘가져와졌다. 기본 Json형식은 어떻게 되어있나 링크를 들어갔지만 나는 줄바꿈이나 그런것없이 다 붙어있어서 뭐가 뭔지 알아보기가 힘들었다. 그래서 찾아보니 이쁘게 변경해주는 사이트가 있다고 해서 변경해보았다. 이렇게 나온다. 즉 .name.. FE/React 2022. 7. 26. [React] css에서 알아두면 좋은점, useEffect 1. react에서 App.js나 index.js에다가 무작정 css를 Import해도 되긴하지만, 이러면 전역으로 쓰이는데다가 다른 자바스크립트에서도 쓸라고하면 또 import를 해야한다. 즉, cra(create-react-app)의 장점인 분할과 정복에 효율성이 떨어진다고 할 수 있다. 그래서 쓰는것이 className을 이용한 css인데, Button의 style을 지정하는 css를 다음과 같이 만들어 준다고 하자. Button.module.css .btn { color:white; background-color: tomato; } 그후에 Button의 컴포넌트를 만드는 자바스크립트인 Button.js에다가 아래와 같은 코드를 넣어보자 Button.js import PropTypes from "p.. FE/React 2022. 7. 24. [React] create-react-app(cra)로 개발환경 구축하기 create-react-app은 개발 환경을 쉽고 간단하게 해주는 것이다. cra를 사용하면 복잡한 설정없이 한번에 React 개발 환경을 구성하고 이용할 수 있다. 우선 node.js를 설치해주어야한다. 나는 이미 설치가 되어있으므로 터미널에서 확인해보면, v16.16.0이 깔려 있는것을 볼 수 있다. node.js를 설치 한후에는, 터미널에 npx create-react-app (폴더명)으로 생성할 수 있다. 이렇게 치게되면 이것저것 설치가 되기 시작할텐데, 다 설치될 때까지 기다려 주도록 한다. 설치가 다 끝나고, vscode로 열어서 package.json를 확인해보니 scripts안에 우리가 필요한 react-scripts이 설치되어 있는것을 볼 수 있다. index.html 을 보면, 앞에서 .. FE/React 2022. 7. 24. [React] Prop/memo/propstype 이번에는 Prop에 대해서 공부했다. 1. Props란 컴포넌트에 전달되는 단일 객체이다 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 “props”라고 한다. Props 자체를 수정해서는 안 된다 여러 컴포넌트를 모아 하나의 컴포넌트를 만들 수 있고, 한 컴포넌트 안에 여러 엘리먼트가 선언되어 있으면 재사용 가능한 단위로 추출하여 유지보수가 쉽도록 하는게 중요하다 const hello = (props) => { return hello, {props.name} } ReactDOM.render( , document.getElementById('root') ); 와 같은 형식으로 유지된다. 2. React.memo(.. FE/React 2022. 7. 24. [React] STATE개념 이해 React에서 중요한 개념인 State에 대해서 공부했다. https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org 윗링크를 참고했다. setState는 어떤 일을 하나요? setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. 이말 자체가 엄청 중요하다 밑에 코드를 보면 알겠지만,useState()를 사용하지 않으면 하나의 이벤트처리등을 할때마다 바뀌는 값들을 ReactDom.render와 같은 형식으로 리렌더링을 해줘야하기 때문이다. 그리고 또, 자바스크립트내에.. FE/React 2022. 7. 23. [React] React 기초 자바스크립트를 공부한후에 react.js에 관심이 생겨서 한번 해보기로 했다. 근데 아직은 익숙하지 않아서그런가 생각보다 쉽지는 않았다. 이것저것 공부한 내용과 주석을 달아보았는데, 우선 처음에 react 와 react.dom을 import 해야한다. 이렇게 삽입을 해주어야 한다. 그후에 JSX를 적용하기전 react 문법들만 가지고 먼저 짜보았다. JSX란 ? https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 이것을 읽어보면 된다. JSX를 적용하기전 코드를 보면 와 같은 형식이 되는데, 기존 Javascript랑 비교해보면.. FE/React 2022. 7. 23. 이전 1 다음
