씹어먹는 블로그

기본 사용 /* index.js */ import {Button} from "semantic-ui-react"; location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 커스텀 /* index.js */ import {Button} from "semantic-ui-react"; location.href='/'}> 홈 이동 /* style.js */ export const BtnWrap = styled.div.attrs(props => ({}))` margin-top: 25px; & .ui.button.btn-1 { color: #fff; padding: 5px 14px; border-..

styled-components /* style.js */ export const PageWrap = styled.div.attrs(props => ({}))` color: #1a1a1a; background-color: #ffec9e; `; /* index.js */ import * as Styles from '../styles'; 내용~~~~ 위 형식처럼 style.js 를 import 후 Style. 이후에 export 정의한 스타일명으로 사용 가능하다. 그런데 위 처럼 사용할 때, 여러 페이지에 PageWrap 처럼 동일한 스타일을 적용하면서 일부만 다르게 적용하고 싶을 때는 아래처럼 사용 가능. /* style.js */ export const PageWrap = styled.div.attrs(..

간단한 component 사용 방법 1. function 을 새로 만들어서 component로 뺄 html을 작성 2. function 이름을 html tag로 삽입 function App() { return ( ); } function ComponentTest() { return ( 컴포넌트 테스트 !! ); } 함수명을 컴포넌트로 사용하기 때문에 리액트에서는 함수가 컴포넌트라고 볼 수 있다. App 컴포넌트에서 ComponentTest 컴포넌트를 불러오는 예제. 주의할 점 1. 컴포넌트 앞글자는 항상 대문자로 해야한다. 태그를 사용할 때는 위 두가지가 동일하니 편한 방법을 사용하면 됨 2. 컴포넌트 간 state를 사용할 때는, props 를 이용하여 변수를 전달해야 함

상태값 변경 시 자주 사용되는 방법 1. 해당 값을 복사한다 (원본을 참조하지 않게 깊은복사로) 2. 복사한 값을 수정한다. 3. state를 set한다. import './App.css'; import {useState} from "react"; function App() { const [val, setVal] = useState(5); const [array, setArray] = useState([1, 2, 3]); function btnClick() { const copyArray = [...array]; // ES6 deep copy setArray(copyArray.reverse()); } return ( { array } 버튼 클릭!! ); }

1. nodejs 설치 2. react project 설치 3. 로컬서버에 프로젝트 빌드 1. nodejs 설치 LTS버전으로 설치하는 것이 안정적으로 사용 가능. 최신버전으로 설치하게 되면 프로젝트 빌드시 에러 발생할 수도. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. react project 설치 터미널에서 프로젝트폴더를 생성할 위치로 이동 후 npx create-react-app myapp npx create-react-app myapp react 프로젝트를 생성해준다. 그리고 Intellij 에서 프로젝트..

순서 1. nvm 설치 (Node Version Manager) 2. Node.js 설치 (12.13.1 버전 사용) 3. Python 설치 nvm on > node -v > npm -v 설치 후 nvm 활성화 및 설치된 Node.js 버전 확인 > nvm use 12.13.1 Node.js 12.13.1 버전을 사용한다는 명령어 3. Python 설치 https://www.python.org/downloads/ Download Python The official home of the Python Programming Language www.python.org 위 사이트에서 Python 최신버전 다운로드 후 설치 React Native 빌드 시스템은 Python에 의존하기 때문에 설치 해줘야 함 (그런줄..