분류 전체보기 (104) 썸네일형 리스트형 [React 기초 문법] #4 event handling(이벤트 핸들링) 이벤트란? 사용자가 웹에서 DOM 요소들과 상호 작용하는 것을 event라고 한다. 사용법은 HTML에서 이벤트를 작성한것과 유사하나 몇가지 차이점이 있다. 이벤트 이름은 카멜케이스로 작성함. DOM요소에만 이벤트를 설정할 수 있음.(component에 직접적으로 이벤트를 설정 할 수 없음.) 자주 쓰는 이벤트 핸들링(input tag와 onChange) 클래스형 component ver. import React, { Component } from "react"; class App extends Component { state = { name: "", }; render() { return ( { this.setState({ name: e.target.value, }); }} /> ); } } export.. #1 마음이 조급해서 쓰는 일기 왜이렇게 마음이 조급할까? 하고싶은 것은 큰 가운데 나는 초라하기 때문일까. 아니면 한평생을 버둥버둥 거리며 살아왔기 때문일까. 항상 안간힘을 쓰며 살아온 탓에 쉼조차 온전히 누리지 못하는 모습에 많이 놀랐다. 바꾸어야지 바꾸어야지 온전한 쉼은 그리고 마음의 평안은 편협한 나의 생각을 넓어지게 한다. 마음이 불안하고 조급한 가운데에도 참 감사한 것은 공부하고 싶은 것들이 자꾸 나타난다는 것이다. 역동적인 interaction과 관련된 것들에 흥미가 생긴다. 하고 싶은 공부는 기초가 될 javascript와 react를 탄탄히 공부한 후 남는 시간에 해야지... 이제 돌아오는 월요일부터 본격적으로 백엔드와 관련된 것들을 공부하기 시작할텐데 걱정보다는 설레임으로 받아들이자. [React 기초 문법] #3 state와 props props와 state의 의미 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 내에서 읽을 수만 있다. 따라서 props를 바꾸려면 부모 컴포넌트에서 바꾸어야만 한다 . 공식문서에 의하면 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 (입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야한다. 라는 말이 있다. 사용자의 액션, 네트워크의 응답 및 다른 요소에 대한 응답으로 시간에 따라 props가 컴포넌트 내에서 바뀌어야만 하는 상황이 있는데 이때 사용하는 것.. [React 기초 문법] #2 클래스형 컴포넌트 + props 컴포넌트의 기능 데이터를 바탕으로 UI를 만들어 줌. 라이프사이클 API를 이용하여 컴포넌트가 화면에 렌더링 될 때(didmount), 사라질 때(unmount), 업데이트 될 때(didupdate) 주어진 작업을 처리할 수 있음. legacy가 되어버린, 하지만 배워야하는 클래스형 컴포넌트 현재 코드스테이츠에서는 함수형 컴포넌트를 알려주고, 이를 바탕으로 스프린트를 진행한다. 하지만 리액트관련하여 검색해보면 대부분의 자료가... 클래스형이다! 특히 stackoverflow에서는! 취업을 하려면 둘 다 할 줄 알아야할 것이다. 분명. 아무튼 클래스형은 아래와 같은 형태로 되어있는데... import React, {Component} from 'react'; class App extends Componen.. 2021년 6월 5일 cmarket 리덕스 스프린트를 위한 redux 흡수하기(뇌피셜 + 튜토리얼/ 공식문서 훑어보기) 리덕스 뇌피셜 component 속 eventHandler 함수(ex : handleClick or handleQuantityChange or handleDelete 등...) 안에서 dispatch()에 본 component에서 set해야하는 state에 해당하는 action을 기재한다. action에는 타입(후에 reducer에서 타입으로 case를 구분)과 reducer로 전달하는 매개변수(state를 변화시키는 재료들)가 담겨있다. : 함수의 매개변수를 전달하는 느낌 reducer에는 state를 변화시키는 실질적인 함수들이 들어가 있다. 원래 eventHandler함수의 {}바디에 해당하는 것들이 저장되어 있는 듯. : 매개변수를 가지고 실제로 현재의 state를 변화시키는 함수 같은 느낌 질문.. [React 기초 문법] #1 intro + JSX 몇 가지 규칙 Intro 리액트가 참 재밌는데, 구현해보고 싶은게 많은데 뜻대로 움직이지 않는 그리고 예측하지 않은 결과가 반복되면서 내가 원하는 기능과 모습을 구현하기 위해서는(재밌는 것을 만들기 위해서는...) 기초 문법을 반드시 잘 다져야겠다라고 생각하여 새로운 카테고리를 팠다. 모래 위의 성보다는 튼튼한 반석위에서 리액트라는 성을 지으리라 JSX 몇 가지 규칙 컴포넌트의 여러 요소들은 반드시 하나의 부모 요소로 감싸여져 있어야 한다. 여기서 하나의 부모 요소는 반드시 태그가 아니어도 좋다. import React, {Fragment} from "react"; 한 후 를 사용해도 된다. 대신 을 사용할 수도 있다. 참고로 는 import를 안해도 되었기에 나는 이것을 더 많이 사용한 것 같다. 자바스크립트 표현식.. 2021년 6월 3일 코드스테이츠 DAY-60 TMI(버블링, 캡처링, 웹접근성, null과 undefined) 면접대비 참고자료 https://ko.javascript.info/bubbling-and-capturing#ref-567 버블링과 캡처링 ko.javascript.info https://www.w3.org/TR/wai-aria-practices-1.1/ 웹접근성 WAI-ARIA Authoring Practices 1.1 5.3.1.2 Rule 2: Prefer Visible Text When a user interface includes visible text that could be used to provide an appropriate accessible name, using the visible text for the accessible name simplifies maintenance, preve.. 2021년 5월 31일 코드스테이츠 DAY-57 첫 아고라 스테이츠(코드 스테이츠의 stackoverflow) 2021년 5월 30일 #4 weather app + todo app에 animation 적용하기(미완) 2021년 5월 26일 #3 weather app + todo app 만들기 with React (미완) 지난 5월 23일부터 react를 연습하기 위해 초보자들이라면 반드시 만들어야하는 weather app을 만들기 시작했다. 어렵기만하던 react가 재밌.. bedeveloper.tistory.com 어제 일자로 작성한 글의 답을 얻기 위하여 처음으로 아고라 스테이츠에 글을 올리게 되었다. 엔지니어분들의 해결을 기대하며.... 결과는 절반의 성공이었다. 직접적인 해답을 얻기보다는 어디에서 답을 구해야하는지 알려주었기 때문이다. 아고라 스테이츠에서는 스프린트 이외의 질문에 100% 핸들링 되지 않는.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음
