Contents Toaster

컴포넌트 기본형함수형 컴포넌트[1] 함수형 컴포넌트 기본형function 함수이름() {}- return 구문이 렌더링되는 부분- 예제코드import React from ‘react’;import ‘./App.css’;function App() {  const order = “americano”;  return {order};}export default App;[2] 함수형 컴포넌트 화살표형 (ES6 이후 버전)const 함수이름 = () => {}- function 키워드 대신 () => {} 를 사용- 예제코드const doubling = (num) => num * 2; [3] 화살표형과 기본형의 차이점- 컴포넌트 선언시 둘은 차이가 없으나, 가리키는 this 가 다름- function 일반함수 내에..

시작하기 React Redux 구글검색이 혼란스러운 이유 리액트 사용을 위한 리덕스 학습시 혼란스러운 점은 사용하는 라이브러리가 다음과 같이 두 개라는 것이다. 그 사용법도 다르다. redux 라이브러리 react-redux 라이브러리 혼란을 가중시키는 것은 구글의 예제 검색 결과인데, 리덕스 예제를 검색해보면 세 종류 샘플코드가 혼재되어 나온다…. JavaScript에 접목한 redux 샘플 코드 리액트에 redux 라이브러리를 사용한 샘플 코드 리액트에 react-redux 라이브러리를 사용한 샘플 코드 이렇게. 하지만 일단 이 사실만 알고 나면 혼란은 잠잠해지고, 내용을 걸러낼 수 있게 된다.(아마도) Redux 개념 빠르게 깨닫는 방법 전반적인 학습을 원한다면 코드의 바다에서 몸부림치는 중생들에게..

리덕스(Redux)의 개념 리덕스(Redux)란? 리덕스(Redux) 공식홈페이지에서는 리덕스를 자바스크립트 앱을 위한 예측 가능한 state 보관함("A predictable state container for JS App")으로 정의하고 있다. 여기서 state는 1개의 객체 변수(ex. {name: "홍길동", age: 26})를 의미한다. 다시 말해 리덕스는 {} 이렇게 생긴 한 개의 객체 안에 앱에서 다루는 모든 데이터를 우겨넣어 관리하는 역할을 하며, 그 객체를 state라고 부른다. 리덕스는 리액트(React)를 효율적으로 사용하기 위해 발전되어 왔으나, 현재는 독립된 훌륭한 기능들을 갖추었으며 JavaScript 로 작성한 모든 앱에 적용 가능하다. 리덕스(Redux)의 작동 방식 생활코딩..

1. cmd창에서 설치하기 // npm으로 설치시 npm install react-icons --save // yarn으로 설치시 yarn add react-icons 2. 아이콘 고르기 아래 웹사이트에서 첫화면 말고 왼쪽 메뉴창을 차례로 클릭하면서 확인. 고른 아이콘은 이름 복사 https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Instal..

CSS 미디어쿼리를 SCSS 문법에 적용한 반응형 레이아웃 예제 기본틀 App.js import "./App.scss"; function App() { return ( DIV A DIV B DIV C ); } export default App; App.SCSS 작성 * 참고로 scss를 사용하려면 커맨드창에서 "sass"를 다음과 같이 설치 해주어야 함 npm install sass 1. scss만의 문법( @mixin 과 변수$ )을 사용하여 브레이크포인트 선언 /* Responsive layout, breakpoint */ $mobile-max: 360px; $tablet-max: 1023px; $desktop-min: 1024px; @mixin mobile{ @media (max-width: $mo..

리액트에서는 브라우저의 화면 폭에 따라 반응하는 CSS의 미디어 쿼리( @media )도 사용 가능하지만 "디바이스" 자체의 화면폭을 확인해서 true/false를 반환해주는 useMediaQuery 라는 리액트 전용 훅(Hook)도 사용할 수 있다. 단, 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하진 않는다. 다만, 모바일이냐 아니냐와 같은 디바이스 자체를 가늠하려는 경우 사용하는 것이 바람직해보인다. useMediaQuery를 사용하려면 react-responsive 부터 설치해야 한다. 1. cmd 창에서 react-responsive 설치 npm install react-responsive 2. 리액트에서 import import { useMediaQuery } from 'react-res..

참고 https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC 설치 cmd 창에서 yarn add sass 후 사용 가능 yarn add sass 1. 사용 가능한 데이터 타입 $boolean: true; $string: hello; $color: red; $number: 720; $list: red, orange, yellow, green, blue; $map: ( l: light, d: dark, ); 2. Nesting 중첩 {} 안에 또 {} 선언 .sectionMain{ width: 100%; .boxLeft { width: 20%; padding: 10px; li { float: left; } } } 3...

props란 props 는 properties의 줄임말 컴포넌트의 속성 부모 컴포넌트에서 (자식) 컴포넌트의 속성값을 조정함 (자식) 컴포넌트에 props 들어갈 부분 코딩 화살표 함수형에서 () 대신 props 써줌 풀어쓰기 const ChildCompo = ({who, order}) => { } 변수형 const ChildCompo = props => { return {props.who}님은 {props.order} 주세요 }; 변수형 + 비구조화 할당 문법 const ChildCompo = props => { const {who, order} = props; return {who}님은 {order} 주세요; }; defaultProps 부모에서 속성 안 넣어줄 경우를 대비, .defaultProps..

React 리액트 이벤트 주의사항 3 1. HTML 기존 형식을 카멜식 표기로 변경해서 사용 onclick => onClick onkeyup => onKeyUp 2. ""안에 바로 함수를 쓰는 게 아니라, 실행할 "이벤트 함수”를 {}안에 전달 HTML 이벤트 onclick = “alert(‘hi’)” 리액트 이벤트 // 바로 함수 onClick = { (e) => { console.log(e); } } // 혹은 {} 안에 미리정의된 함수명 onClick = { showMessage } 3. 사용자 컴포넌트에는 이벤트 불가능 기존 HTML DOM 요소에만 이벤트를 붙일 수 있다 직접 만든 사용자 컴포넌트에는 이벤트 입력 불가능 가령 이렇게 쓴다고 해도 onClick이라는 이름을 가진 props으로 전달..

김민준 저, 「리액트를 다루는 기술」 책을 보며 공부한 내용을 정리한 글입니다. 리액트 state란 리액트 컴포넌트 내부에서 변경할 수 있는 값 1. 클래스 컴포넌트에서 state 기본사항 (1) constructor 함수 쓰는 경우 => 클래스 constructor 안에 this.state = {} 형태로 선언 class MyCompo extends Component { constructor(props){ super(props); // 노묻따 필수라인 this.state = { state1: 초기값, state2: 초기값 }; }; render(){ ... }; } (2) constructor 함수 안쓴다면 => 클래스 안에 state = {}; 형태로 선언 class MyCompo extends Co..