Build the Needs

우선 styled components, router, redux, 다른 hook 등 다양한 방법을 연결시켜보면서 state과 props가 왜 중요한지 다시금 깨달은 순간인것을 알 수 있었습니다. 특히 props와 state만으로는 부모 컴포넌트가 state를 props로 자식 컴포넌트한테 물려주는 형식인데 너무 많은 자식 컴포넌트가 생긴경우 초기 부모 컴포넌트한테 내려받을려면 무수히 많은 다른 자식컴포넌트를 거쳐야 하기에 생긴 redux(필요한 state 저장소) 그리고 router를 통해 다른 상세 페이지를 넘어 갈 수 있는 부분과 리렌더링이 일어나는 경우가 부모 state가 변경되어 props가 변경되는 경우나, 자식 컴포넌트가 변하는 경우나, 강제 업데이트 등 다양한 요소로 리렌더링이 일어날 수 있..

원래 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가 바뀌었으니까 자식이 다시 렌더링되는건 여기에서 작업이 끝남 자식이 부모한테 데이터를 주는 상황에 만약 자..

JS로 실현한 부분을 React로 실행시켜보았다 //app.css #title { color: blue; text-decoration: underline; } .wrap { display: flex; align-items: center; } .todo-card { border: 1px solid gray; padding: 2em; margin: 1em; border-radius: 5px; } button { width: 100px; } button:hover { background-color: orange; } //app.js import React from "react"; import logo from "./logo.svg"; //폴더는 소문자로 시작하는 카멜케이스, 컴포넌트를 만드는 파일은 대문자로 ..

우선 양방향 바인딩에 들어가기 전에 데이터 바인딩이란 무엇인가에 대해 들어갈 필요가 있다. 🎁 데이터 바인딩이란? 두 데이터 또는 정보의 소스를 일치시기는 방법으로 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 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라고 볼수 있지요. 그리고 ..