Ming's develop story

단방향 데이터 흐름이란? 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리이다. 왜 단방향으로 써야하지? 라이프 사이클과 함께 생각해보면 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각하고, 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 될것이다. 그리고 또 자식 컴포넌트가 리렌더링 되며 반복될 것이다. 네모 만들기 클래스형 컴포넌트 App.js import React from "react"; class App extends React.Component{ constructor(props){ super(props); this.state = { count: 3..

만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까? → 답은, 리액트 요소에서 가져온다! Ref를 하나의 이름표라 생각하면 이해하기 쉽다. 방법 1 - 클래스형 컴포넌트 중간에 value를 확인하는 방법중 하나는 밑에와 같다. 방법 2 - 함수형 컴포넌트 함수형 컴포넌트에서는 이처럼 Ref를 사용할 수 있는데 중간에 확인하는 방법으로는 setTimeout()을 활용하는 방법이다. window.setTimeout(() => { console.log(my_wrap); }, 1000); 여기서 두번째 인자(1000)의 시간이 흐른 후에 첫번째 인자에 있는 함수를 실행하도록 하는 코드이다. 밀리세컨드 기준이라 1000 = 1초

Ctrl + Shift + x를 눌러 확장 패키지 검색창을 띄우고 밑의 확장패키지를 검색후 다운로드 받으면 원래는 주황색으로 보였던 css코드들이 이렇게 이쁘게 잘 바뀌는것을 확인할 수 있다. 덩달아 자동완성 기능도 추가되기 때문에 필수적인 요소인것 같다.

BucketList.js 코드 import React from 'react'; import styled from "styled-components"; const BucketList = ({ list }) => { const my_lists = list return ( { my_lists.map((list, index) => { return ( {list} ); }) } ); } const Itemstyle = styled.div` padding: 16px; margin: 8px; background-color: aliceblue; `; export default BucketList; App.js 코드 import React from 'react'; import BucketList from './Bucke..

styled-components 패키지 다운로드 무조건 프로젝트가 있는 파일 경로 안에 설치해주어야 한다. styled-components 란? CSS-in-JS 라이브러리 중 하나이다! 컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각해도 된다. - class 이름 짓기에서 해방된다 - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다! 위 두가지 이유 때문에 컴포넌트 스타일링 기법중 괜찮은 방식이다. 사용법? App.js 상단에 import를 해준다. 이후 하단 export 위에 스타일을 작성해준다. 컴포넌트처럼 사용하고 있는데 이 친구도 컴포넌트이기 때문에 데이터를 가지고 있을 수 있기 때문에 props를 줄 수도 있다. 이렇게 사용 가능한데 중괄호 안에 백틱(``)을 써주면 삼항연산자도..