React (12) 썸네일형 리스트형 [React] Redux를 이용하여 값을 증감시키는 예제 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 저번 시간에 작성했던 Redux 개념을 기반으로 간단한 예제를 만들어보자. Redux를 이용한 숫자 증감 기능 만들기 -프로젝트 구성 actions: Action을 처리하기 위해 만들어진 파일들의 폴더 index.js - 외부에 export 하기 위해 사용되는 Script mainAction.js - Redux Action을 담당하는 Script function actionIncrement(): 값을 증가시키는 Action function actionDecrement(): 값을 감소시키는 Action components: View를 처리하기 위해 .. [React] Redux 개념 이해 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] - Redux? Redux는 state를 효율적으로 관리해주는 React의 Library로, 각 Component별 state를 분리시켜 효율적으로 작업 및 관리할 수 있다. 이전 Project까진 Main Component에 state를 생성하여 자식 Component와 연결한 후, Component별로 전달하고 전달하여 사용하였다. 그러나 Redux를 사용하면 연결된 Component사이에서 옮길필요없이 state를 전달 할 수 있다. 아래는 Redux를 사용하지 않고 state를 이용하는 그림이다. 위의 방식은 처음 사용했던 state를 통해.. [React] Route를 이용한 Component 전환 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번엔 react-router-dom Module를 이용하여 Component를 전환하는 방식에 대해서 알아보자. 시작에 앞서 다음의 Module을 설치해주자. react-router-dom query-string react-router-dom에서 실습할 함수는 3가지가 존재한다. BrowserRouter Route Link BrowserRouter 지정한 Component를 Main Router로 지정해준다. 해당 Component에서 다른 Component들을 전환시켜줄 수 있게 된다. 우선 Root.js를 생성해서 다음과 같이 입력한다. im.. [React] Sass[scss] 디자인 적용시키기 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 지금까지 React 프로젝트를 보면 ~.css를 통해서 디자인을 적용하였다. 이번엔 Sass 방식을 이용한 CSS인 ~.scss를 적용시켜보도록 하자. Sass[scss] Sass는 CSS의 복잡한 구조를, 좀 더 효율적으로 작성할 수 있게 도와준다. 변수를 사용한다거나 제어문을 사용한다거나 등등... 함수를 이용함으로써 반복되는 코드를 재사용할 수 있을 뿐만 아니라, 필요한 부분은 변수를 통해 별도로 호출하여 사용할 수 있다. 일단 중요한 건 scss를 직접 만드는 것이 아니라, 어떻게 사용되고 React에선 어떻게 적용시키는지에 대해 초점을 맞.. [React] JSX에 map을 이용하여 값 반복 출력 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] React의 JSX 내부에선 for 구문을 이용할 수 없었다. 그렇다면 반복적으로 처리해야 하는 태그는 일일이 다 쳐줘야 하는 것일까? 여기서 사용하는 함수인 map이 존재한다. 문제 동물 3마리를 담는 배열 arr이 존재한다고 하자. 이 동물들을 웹에서 항목 표시()로 출력하고자 한다. 단, 태그를 여러 번 입력하는 것이 아닌 반복 처리를 하여 출력시켜야 한다. 사용하는 방법은 간단하다. 배열.map( (value, key) => 처리문 ) let arr = ['호랑이', '코끼리', '독수리'] let brr = arr.map((value, k.. [React] props와 state를 활용한 예제 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 저번 포스팅에서 설명한 props와 state를 활용해 간단한 예제를 만들어보도록 하자. 문제 App Component엔 동물 3마리를 담을 수 있는 배열이 존재하며, 랜덤으로 값을 저장할 수 있는 변수가 존재한다고 하자. Bpp Component는 App로부터 동물 배열을 받고, 버튼을 생성하여 누르면 랜덤 값을 App로부터 지속적으로 받아 동물 배열의 Index를 바꿔가며 실시간으로 View에 동물 이름을 출력한다. 그러면 설계를 다음과 같이 할 수 있을것이다. 동물을 담을 수 있는 배열은 변동이 없으므로 고정으로 놓고 사용해도 문제가 없다. .. [React] Props vs State [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] props 기존 시간에 props에 관해 설명한 적이 있다. 자식 Component가 부모 Component로부터 값을 받고 싶을 때, props를 통해 받아올 수 있었다. 예시 코드를 보자. import React, { Component } from 'react'; class App extends Component { render() { let a = 10; return ( ); } } class Bpp extends Component { render() { return ( {this.props.a} ); } } export default App.. [React] 외부 Component 호출 및 함수 호출 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번 시간엔 외부 Component를 참조하거나, 외부 함수를 호출하는 방법에 대해서 알아보자. Component Import 우선 3개의 Component를 생성해보자. Main인 App.js 이외에 Bpp.js, Cpp.js를 생성하자. App.js import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; Bpp.js, Cpp.js Class에서 App를 Bpp와 Cpp로 변경하고 expor.. 이전 1 2 다음
