Tag: React

2019
0
DevelopReact

State 끌어올리기

React Official Document주요개념 : State 끌어올리기 온도계산기 기본 컴포넌트 생성 두번째 Input 추가 하기 변환 함수 작성 State 끌어올리기 Calculator 변경사항 요약 Calculator 컴포넌트 수정하기 정리 교훈 React Official Document주요개념#9. State 끌어올리기온도 계산기기본

0
DevelopReact

폼

React Official Document주요개념 : 폼 HTML 에서의 Form React에서의 Form 제어 컴포넌트(Controlled Components) textarea 태그 select 태그 file input 태그 다중 입력 제어하기 제어되는 Input Null 값 React Official Document주요개념#8. 폼HTML

0
DevelopReact

리스트와 Key

React Official Document주요개념 : 리스트와 Key 자바스크립트에서 리스트 변환 리액트에서 여러개의 컴포넌트 렌더링 하기 기본 리스트 컴포넌트 Key Key로 컴포넌트 추출하기 Key는 주변 배열의 context에서만 의미를 지니고 있다. Key는 형제 사이에서만 고유한 값을 지녀야 한다. React에서 Key는 컴포넌트로 전달되지는

0
DevelopReact

조건부 렌더링

React Official Document주요개념 : 조건부 렌더링 조건 연산자 이용 엘리먼트(요소)를 변수에 저장하기 인라인으로 IF를 표현하기 논리 && 연산자로 if를 인라인으로 표현하기 삼항 연산자로 If-Else구문 인라인으로 표현하기 컴포넌트 렌더링 막기 setState 일괄처리 setState 일괄처리 해결 Re

0
TILReact

React 스터디 10

React Study 10 객체의 접근 방법 YouTube 프로젝트 변경점 좋아요, 싫어요 기능 추가 댓글 추가 / 삭제 기능 추가 Stale closure problem 결과를 변경하기 위한 해결점 1 : 함수를 만들고 함수로 호출 결과를 변경하기 위한 해결점 2 : 즉시실행함수를 사용한다. React Hook useState useEffect

0
TILReact

React 스터디 09

React Study 09 여러 데이터를 담을 변수의 타입 결정 : 객체 선언 vs 배열 선언 defaultValue와 Value YouTube 프로젝트 변경점 <SearchBar> 태그 URL로 쿼리를 변경하는 방식으로 바꾸기. ComponentDidUpdate 설정 getYoutubeData 함수 → 클래스필드 변수로 변경 getYo

0
DevelopReact

이벤트 처리하기

React Official Document주요개념 : 이벤트 처리하기 React 이벤트 문법 기본동작 방지 ( preventDefault ) 이벤트 리스너 예제 : Toggle 컴포넌트 만들기 React this constructor 내부에서 this 바인딩 public class field 문법 콜백에 화살표 함수 사용 constr

0
DevelopReact

State and Lifecycle

React Official Document주요개념 : State and Lifecycle 함수에서 클래스로 변환하기 클래스에 지역 State 추가하기 생명주기 메서드를 클래스에 추가하기 componentDidMount() 메서드 구현 componentWillUnmount() 메서드 구현 tick() 함수 구현 호출 순서 요약 State 올바르게 사용

0
TILReact

React 스터디 08

React Study 08 React에서 input 태그 value 와 defaultvalue 차이 Redux 리덕스 사용 이유 카운터 실습 폴더 구조 Actions 설정 src/actions/index.js reducers 설정 카운터 리듀서 설정하기 src/reducers/counter.js reducers 합치기 src/reducers/in

0
TILReact-Preview

props를 통해 컴포넌트에게 값 전달하기

React with Velopert - 03 - props 를 통해 컴포넌트에게 값 전달하기 props 란 ? props의 기본 사용법 여러개의 props, 비구조화 할당(디스트럭처링) defaultProps 로 기본값 설정 props.children 조건부 렌더링 예제 : 특정 props의 값이 true 또는 false 에 따라서 컴포넌트