Build the Needs

//처음 App.js import React from "react"; import { useDispatch, useSelector } from "react-redux"; //사용할 Action Creator import를 해서 사용 import { minusOne, plusOne } from "./redux/modules/counter"; const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); console.log(number); return ( {number} { dispatch(plusOne()); //{type: "PLUS_ONE"} 대신 이렇게 사용 }..

버킷리스트 1. 가장 먼저 뷰를 만들고 (텍스트를 입력하는 input), 입력한거를 추가하기 위한 버튼(이거 먼저 만들기) 2. Ref를 가지고서 이 input을 가지고 오는거 3. input에서 "text"를 가져와야 하는데 추가하기 버튼 눌렀을 때 가지고 와야함 4. App.js에 App 컴포넌트 State에 그 텍스트를 추가하면 됨 목표는 이렇게 하나씩 리스트가 붙게 만드는것이며 style.css를 사용하지 않고 css 스타일링은 모두 styled-components를 활용한다. //App.js import React from "react"; import BucketList from "./BucketList"; //import "./style.css"; import styled from "style..

원래 getElementbyId로 데이터를 가져오고 카드에 하나씩 넣을때 appendChild해서 넣었었다 => 근데 이 두개는 진짜 가상DOM이 아닌 진짜 DOM을 건드렸었던 것이니다 클래스형 컴포넌트는 app.js에서 다 만들어줬었다. //App.js constructor(props) { super(props); //부모클래스에 있는걸 가져오기(React.Component) //내상태값(내 컴포넌트가 갖고 있는 데이터), App이라는 클래스형 컴포넌트는 //지금 State라는 데이터를 나를 이 App이라는 클래스안에다가 넣어놓기 this.state = { list: ["영화관가기", "매일 책 읽기", "수영 배우기"], }; //Ref를 어디에 넣어줄지 정해주는것은 이부분(React.createRe..

일단은 함수형 컴포넌트에서 관리하는거니까 -> 새 컴포넌트 만들기 Nemo.js 폴더를 src밑에 만들고 //함수형 컴포넌트 기본양식 import React from "react"; //화살표 const Nemo = (props) => { return null; } export default Nemo 그리고 App.js에서 import React from "react"; //이부분이 import해오는 부분 import Nemo from "./Nemo.js"; class App extends React.Component { constructor(props) { super(props); this.state = { //이 숫자를 가지고 배열을 만들고 배열을 만든 후 배열만큼 map돌려주면됨 count: 3, ..

state 관리 단방향 데이터 흐름? 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야함 why 단방향? 부모컴포넌트의 state가 업데이트가 되면서 자식 컴포넌트도 리렌더링이 일어남 생성-> 수정->삭제 수정이 되는경우가 4가지였는데 -> 컴포넌트자체 state가 바뀔때 -> 내 props가 바뀌는 경우 -> 부모가 리렌더링 되는 경우(부모의 무언가가 바뀌는경우) -> 강제 업데이트 부모의 state가 있다면 그것을 자식한테 그대로 넘겨준다라고 생각할때 자식한테는 그것이 props임 여기까지 생각할때 부모의 state가 변함 -> 그럼 부모는 리렌더링이됨 부모가 리렌더링되었으니까 혹은 props가 바뀌었으니까 자식이 다시 렌더링되는건 여기에서 작업이 끝남 자식이 부모한테 데이터를 주는 상황에 만약 자..

🎁컴포넌트(Component) 컴포넌트는 우선 불록이고 함수입니다 컴포넌트 = 화면을 구성하는 하나의 단위 레고 블록을 코드로 만들면 // App 컴포넌트 function App (){ return } 리액트 세계에서 말하는 컴포넌트는 함수 컴포넌트를 만들라고 한다면 우리는 html을 return 하는 함수를 만들면된다 👉 리액트에서 컴포넌트는 클래스형 Component와 함수형 Component가 있으며 둘의 차이점은 상태값과 Life Cycle의 유무에 따라 다릅니다. 💥 하지만 리액트 버전 16.8부터는 훅(Hook)에 의해 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성할 수 있게 되었습니다. 📌클래스형 Component 🟥 클래스형 컴포넌트는 상태값을 가질 수 있으며 리액트 컴포넌트의..

우선 양방향 바인딩에 들어가기 전에 데이터 바인딩이란 무엇인가에 대해 들어갈 필요가 있다. 🎁 데이터 바인딩이란? 두 데이터 또는 정보의 소스를 일치시기는 방법으로 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 Object(객체)를 일치시키는 것을 말합니다. 예시로 MVC모델에서 model과 view를 서로 묶어서 model과 view를 자동 동기화하는 것을 말합니다. 🎁 양방향 데이터 바인딩은 그럼 무엇일까? 쉽게 말하자면 양방향 데이터 바인딩은 Back-end의 Model과 Front-end의 뷰 양쪽의 데이터 일치가 모두 가능한 것이다. 데이터의 변화를 감지하여 템플릿과 결합해 화면을 갱신하거나 화면 입력에 따라 데이터를 갱신하게 되는 것입니다. 뷰에서 사용자가 특정 데..

🎁 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 📌 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. Javascript변수는 만들었을때 바로 특정 타입 값으로 연결되지 않으며 어떤 타입의 값으로 할당할수도 있으며 또한 재할당 할 수도 있습니다. 흔히 자바스크립트는 untyped 또는 weakly-typed언어라고도 많이 부릅니다. 예를 들어 "12345" 라는 문자열과 1이라는 숫자를 곱하게 되면 원래는 문자열에 int라는 type을 자바에서는 설정해주겠지만 자바스크립트에서는 그냥 "12345 * 1 === 해도 결과값은 12345로 숫자로 나오게 됩니다. 그러므로 자바스크립트는 weakly-typed라고 볼수 있지요. 그리고 ..