STATE
-
[React] 공식문서 학습(문서) : 주요 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 28. 18:25
🧐 서론 문서의 첫 시작이었던 설치는 아무래도 개발보다는 전반적인 소개에 가까웠다. 이 주요개념을 공부하는 것이 React를 시작하며 허술했던 기반을 다져줄 수 있을거라 기대된다! (분량이 많다면 나누어야할듯) 💙 설치 1. Hello World ReactDOM.render( Hello, world!, document.getElementById('root') ); 모든 언어와 프레임워크를 시작하면 "Hello World" 출력이 첫 걸음이다. 이 역시, React의 가장 기본적인 조작으로 "Hello, world!" 글귀의 제목 엘리먼트(혹은 요소, 태그 등) 를 렌더링한 모습이다. 2. JSX 소개 const element = Hello, world!; React 컴포넌트가 반환해야 할 형태이며, 이는..
-
[Day 13] UX(User Experience), React(State, Props)카테고리 없음 2020. 12. 31. 12:11
🤔 서론 오늘은 세션들과 시험이 많이 구성되어 있지만, UX와 더불어 React의 핵심이라 할 수 있는 State, Props 세션에선 특히 집중해야겠다. 🥋 CodeKata : Day 03 3주차 코드카타 리뷰 : abangpa1ace.tistory.com/47 [CodeKata] wecode 3주차 코드카타 🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 abangpa1ace.tistory.com 🧑💻 Session : UX와 웹 개발 1. 웹사이트의 발전 정보량 과다, 문서 이상의 매체 다양한 디바이스들의 등장 복잡해진 화면, 정보를 보다 빠..
-
[React.js] Stateful vs Stateless ComponentsFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 29. 19:21
🤷 Component의 다른 분류방법 우리는 컴포넌트의 형식에 따라, 클래스형 컴포넌트 & 함수형 컴포넌트로 분류해서 공부했다. 이 둘의 가장 큰 차이는, 구문형식과 더불어 state의 사용가능 여부에 있었다. (클래스는 가능, 함수는 불가) 이러한 단점의 보완을 위해, 함수형 컴포넌트에는 Hooks 기능이 추가되었다. 반대로, 클래스형 컴포넌트라고 해서 반드시 state를 가지고 있는 것은 아니다. 이에 따라, 컴포넌트를 stateful / stateless 두 종류로도 나누는 것 같다. 이에 대해 공부해보았다. 📒 Stateless & Stateful Component Stateless 컴포넌트(Child)와 Stateful 컴포넌트(Parent)를 클래스형으로 각각 코드해보았다. //📂Child.j..
-
[React.js] StateFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 20:54
🤷 State 란? Dynamic Information은 변화하는 정보를 의미한다. 이러한 Dynamic Information을 React는 실시간으로 렌더링 해야한다. 여기에 쓰이는 두가지 방법이 바로 'Props' 와 'State' 인 것이다. (이외의 컴포넌트 값들은 고정되어있음) Props가 상위 컴포넌트에서 하위 컴포넌트로 보내주는 값이라면, State는 컴포넌트 자기 자신이 가지고 있는 값으로, 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다. Props State 읽기 전용(read-only) 비동기 가능 수정 불가 this.setState() 수정 가능 상위에서 하위로 props 전달 하위에서 상위로 event를 통해 전달 모두 Object이며 화면에 보여줄 정보(..