React

가상 DOM을 통해 UI를 만드는 라이브러리인 React의 초기세팅을 진행해보자👻 node.js를 설치한 이유?react사용에는 node.js의 npm툴이 필요하기때문. npm은 node.js로 만들어진 프로그램을 쉽게 설치할 수 있도록 만들어주는 앱스토어 같은 역할

Component는 UI를 독립적으로 사용가능하도록 나누어놓은 코드조각들이다. class 명은 대분자로 시작해야한다. component에 들어갈 코드에는 하나 이상의 최상위 태그가 포함되어야한다 app.js 파일에 위의 기본 구조를 따라 Component를 생성해준다

이번에는 props라는 개념을 사용하여 더 생산적인 Component를 만들어 보자. React는 정의해준 컴포넌트로 작성한 요소를 발견하면 JSX의 속성과 속성값을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체를 props라고 한다. 기존 삽입해 두었던 Subje

props 와 state > property의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에게 주는 값이다. 하위 컴포넌트에서는 porps를 상위 컴포넌트로부터 받아오기만하고 받아온 props를 직접 수정할수는 없다. 받아온 props값은 this.로 접근할 수 있다.

만들고 싶은 이벤트는 1\. h1태그 안의 단어를 클릭했을 때 (onClick/preventDefault)2\. mode가 welcome으로 변경되면서 (bind/setState)3\. content의 내용이 변경되는 이벤트 (이건 적지 않았다.)일단, 이벤트가 실행되

후, 자 세션듣자마자 바로 정리하자!!!!화이팅 !!!!!!!👊🏻👊🏻👊🏻🔥 1. 작업준비 지금까지 작업했던 위스타그램에 백엔드 데이터를 가져와 보려고 한다. 작업순서는 아래와 같고 나는 1~5번까지의 작업은 이미 완료된 상태이다. 6번 fetch함수

React를 배워야하는 이유를 알아보기전, 먼저 프레임워크와 라이브러리의 차이를 명확하게 하고 넘어가보자. 두 가지의 차이를 집짓기에 비교해보자면, 프레임워크는 이미 집의 구조나 철제들이 다 지어져 있는 완성품 상태다. 우리는 벽돌의 색을 바꾸거나, 집안의 가구를 재배

노드 JS 웹 브라우져 밖에서도 JavaScript로 프로그래밍을 할수 있도록 돕는 환경. JavaScript는 원래 브라우저 위에서 동작하는 웹페이지나 웹어플리케이션을 위해 작성하는 언어였으나, Node.Js 인해 이제 어디서나 JavaScript로 프로그래밍을 할

Component를 만드는 방법에는 Class 와 Function 두가지 방법이 있다. Class Component는 리액트에서 제공하는 컴포넌트라는 클래스를 상속(extends)해서 만든다. => Class 컴포넌트명 extends Component state와 li

state를 직접 수정하면 안되는 이유? setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있다. 즉, 예상치 못한 곳에서 버그가 발생 할 수 있다.

componentDidMount() 메소드를 통해 라이프 사이클에 대한 이해를 높인다. fetch() 함수를 사용해 API 호출을 할 수 있다. Array.map() 함수를 통해 component를 재활용할 수 있다. props 를 사용해 단방향(부모 컴포넌트 > 자식

Data Range Picker 공식문서 라이브러리를 사용하여 간편하게 달력을 만들어보자! 먼저 install을 해주고, 컴포넌트 상단에 import해주고,

Redux 란? > 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 라이브러리다. Redux를 사용하는 이유? react를 사용하다보면 겪는 불편함이 있다. props를 부모에서 멀리 떨어진 자식까지 전달해야하거나, 혹은 자식에게서 부모에게로, 또 여기저기로 pro

Redux의 흐름을 파악하기 위해, 버튼을 클릭하면 숫자가 증가/감소하는 간단한 앱을 만들어 보자. combineReducers사용 예를 기록하기 위해 isLogged라는 reducer를 하나 더 생성해 주었다. reducer가 여러개일 경우 combineReducer