react시작하기

react 시작하기 + webpack + babel + sass 설정 리액트를 정리하기 위한 블로그입니다. 잘못된 개념의 경우는 피드백 주시면 감사하겠습니다. 리액트 왜 쓸까요? 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 프레임워크라고 생각하고 있습니다. 사용자 인터페이스가 영어로 줄이면 UI죠. 버튼, 메뉴, 링크 이런걸 얘기하겠...

소스코드 - https://github.com/leaveittogod0123/ReactLab/tree/master/Contact Contact 기본 구조 연락처 보기 간단하게 div태그에 name과 phone 넘버를 넣어 화면에 렌더링할 컴포넌트 ContactInfo를 만듭니다. 검색기능 연락처 데이터를 state로 관리하는 Contact 컴포넌트가 ...

소스코드 : https://github.com/leaveittogod0123/ReactLab state 내부 배열 처리 state에 참조값 형태의 state의 경우에는 데이터를 수정하지 않고, 새로운 객체나 배열에 값을 복사해 수정하는 방법을 사용해야합니다. state 값을 수정할때는 this.setState({ })함수를 사용했죠. 배열의 경우는 c...

코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/Contact keypress 이벤트 image.png phone에 값을 입력한후 "Enter"를 쳐서 Create 버튼을 클릭한 것과 같은 효과를 내고 싶어요. 이미 사용자 인터페이스는 그려진 상태에서 키보드의 Keypress 이벤트를 이...

완성된 소스코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/Contact 이전 작업들은 redux를 써보기 위해서 틀을 구성한 것입니다. 현재 컴포넌트를 나열해보면 Contact - 연락처 데이터를 갖고 있으며 아래 세 개의 컴포넌트에게 props를 전달하는 Smart Component입니다...