Daily Log

진행하는 프로젝트의 버튼을 공통컴포넌트로 사용하고 싶어 개발해보았다. 1. 우선 button 의 html 속성을 알아야한다. 속성을 확인한 후에 사용할 것만 외부에서 props로 주입해서 사용할 수 있게 만들어준다. disabled => 해당 버튼이 비활성화됨을 명시 class => css 스타일 onclick => 이벤트 함수 그 밖, 으로 감싸며 입력한 내용을 label로 정의할 예정 2. React로 Component로 변환 props로 받아오는 요소는 label => span 태그로 버튼 내부의 글을 나타냄 styleClass => 적용될 className disabled => true, false로 활성화 비활성화 조절 onClick => onClick이 일어날 시의 이벤트에 대응 import ..

Styled Components VS CSS Modules CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교 지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산 blueshw.github.io * next.js 로 프로젝트 뼈대 구성 -> next.js 9.3 버전부터 CSS Module을 기본으로 채택하고있다. BEM 규칙 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility naradesign.github.io 클래스..

우선 React-Native를 쓰려면 기본적으로 React를 알아야한다. React-Native로 날씨앱 만들기 강의를 수강중인데, import되는 라이브러리중에 처음보는 라이브러리인 PropType이 있어 알아보았다. 목적 - 부모로부터 전달받은 컴포넌트의 props 타입 확인을 하기 위해 사용한다. - 자식 컴포넌트에 명시해놓은 데이터 타입과, 부모로부터 내려받은 타입이 일치하지 않으면 경고문이 뜬다. 사용법 npm이나 yarn으로 설치부터 한다. yarn add proptypes prop-types 라이브러리해서 import 하여 사용할 수 있다. import PropTypes from 'prop-types'; - PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 사용된다. - prop에..

Props Deconstructing video_item.jsx 한 줄안에 담긴 것을 꾸며볼 것이다. props를 받아올떄 아래처럼 받아올 수도 있지만. const VideoItem = props => ( {props.video.sinppet.thumbnails.mediu.url} //길어짐. 앞의 props를 생략하고 싶다면? ); 상위 컴포넌트에서 props를 전달할 때 video로 전달했으면 그 이름을 그대로 써서 const VideoItem = ({video}) => ( ); 로 써도 되고 혹은 다른이름으로 쓰고싶다면. 아래처럼사용해서 videoItem.snippet.thubnail 이런식으로 사용이 가능하다 const VideoItem = ({video: vidoItem}) => ( ); 만약에..

https://velopert.com/3533 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG 이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케 velopert.com 내용 이해 후 정리 예정

forEach: 배열의 모든 원소에 콜백함수를 1회 실행하고 종료 map: 배열의 모든원소에 콜백함수를 1회 실행하고 새로운 배열 리턴해주고 싶을 때 사용 map은 return 값이 반드시 있음 아래는 habits 라는 배열을 map으로 돌고 하나하나있는 원소의 객체의 id, name, count를 props를 통해 Habit 컴포넌트에 넘기는 과정이다. habits.jsx import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { id: 1, name: 'Reading', count: 0 }, { id: 2, name: 'Running',..

리액트에서 State가 업데이트 될 때면 반드시 내장함수인 setState를 통해서 업데이트 시켜야한다. -> 그냥 state에 있는 변수를 바꿔버리면 안됨. state를 전체적으로 업데이트를 해줘야하는데 그것이 바로 setState! => setState를 써야 리액트가 "아~스테이트가 변경되었구나 렌더함수를 다시 호출하자! 라는 식으로 진행이 됨. class Habit extends Component { state = { count: 0, }; // 아래는 콜백함수 addCountNumber = () => { this.setState({ count: this.state.count+1 }) }; render() { return ( ) } . . . . . } subtractNumber = () => {..

클론한 해당 프로젝트 경로로 들어가서 yarn install yarn start

크롬 개발자 도구로 react관련 앱 다운받으면 component로 해당 사이트에서 구성하는 컴포넌트들을 확인할 수 있다. 컴포넌트 표시가 안되는 부분은 순수 자바스크립트임 - state는 그 컴포넌트에서 가진 데이터 - props는 부모로부터 받아온 데이터가 props JSX - 분명 자바스크립트 코드인데 html과 비슷한 코드가 쓰여지는 중 app.jsx import React from 'react'; import './app.css'; function App() { return Hello :) } export default App; 자바스크립트 코드위에서 간단하게 html처럼 쓸 수 있게 만들어진게 jsx html class / onclick / 마크업언어 jsx className / onClick..

컴포넌트 클래스 / 함수 state라는 오브젝터가 들어있음 -> state가 변경되면 render함수가 호출됨 -> DOM TREE에 올라갔을때, 나왔을때 등 컴포넌트의 상태에 따라 함수를 구현해주면 알아서 해주는 라이프사이클 메소드가 있음 function: 간단한 함수로 만들 수 있다. 컴포넌트 데이터가 정적이면 function -> 함수는 한가지의 기능을 수행하는 단위라서.. state나 라이프사이클메소드가 없음. -> BUT, react 16.8 부터는 리액트훅이 생김. 그럼 function에서도 state, lifecyclemethod 다 가능 -> 왜 굳이 리액트 훅이 도입되었나? 기존 클래스컴포넌트에서 할 수 있는 것처럼 동일한 기능이 가능하도록 됨 그럼 왜 생김? class가 어렵다. 클래스..