Coding Story
[ React ] 리액트 라우터 React-Router
이번 게시글에선 간단하게 리액트-라우터(React-Router)가 뭔지 알아보고 사용할 예정이다. 리액트-라우터(React-Router)란? 리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다. 이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다. 먼저 react-router 라는 프로젝트를 만들고 해당 프로젝트 경로로 이동하자. C:\> create-react-app react-router C:\> cd react-router React-Router 를..
[ React ] 리액트 JSX TIP
본래 리액트에서 리액트 엘리먼트를 생성할 때 React 가 가지고 있는 createElement 메서드를 통해 생성해낸다. color 라는 id 를 가졌으며 text 는 "빨강" 을 집어넣은 엘리먼트 h1 태그를 만들 때 아래와 같이 만들어낸다. React.createElement("h1", {id: "color", 'data-type': "title"}, "빨강"); // 빨강 createElement 로 엘리먼트를 만들 경우 빨강 처럼 data-reactroot 가 붙게 되는데 이는 리액트 컴포넌트의 루트 엘리먼트를 식별해주는 애트리뷰트이다. 여튼 이처럼 리액트에서 엘리먼트를 생성할 때 createElement 를 사용하곤 했는데 매번 엘리먼트를 생성할 때마다 React.createEl..
[ React ] 리액트 함수형 프로그래밍
함수형 프로그래밍이란 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능한 프로그래밍을 뜻한다. 이는 함수가 다른 함수를 조작하고, 함수가 함수를 인자로 받거나 반환하는 것이 가능한 고차 함수 개념을 사용한다. 정수나 문자열 같은 일반적인 값을 1급 시민이라 하는데 JAVASCRIPT 는 함수를 1급 시민과 같이 취급하기 때문에 함수형 프로그래밍을 지원한다. 무슨말인가 하니 함수를 변수, 객체, 배열에 넣을 수 있고 이 함수를 다른 함수에 인자로 넘길 수 있고 반환 또한 가능하다. 함수형 프로그래밍의 다양한 예제를 보며 이해해보자. 보통 JAVASCRIPT 에서는 아래처럼 함수를 변수에 담아 사용할 수 있다. var logMessage = function(mes..
[ React ] 리액트 전개 연산자 ?
전개 연산자는 JAVASCRIPT 에서 축약 코딩을 하기 위한 기법 중 하나이다. 주로 배열을 다루는 부분에서 사용되며 이를 사용하면 객체 혹은 배열을 펼칠 수 있다. 혹은 '그 외 나머지 매개변수' 를 임의로 지정할 수 있게 해준다. 배열을 펼칠 수 있다? 나머지 매개변수? 무슨 말인지 아래의 여러가지 예시를 통해 알아보자. 만약 아래와 같은 배열이 두 개가 있다고 가정해보자. const arr1 = [ 1, 2, 3, 4, 5 ] ; const arr2 = [ 6, 7, 8, 9, 10 ] ; 만약 arr1 배열과 arr2 배열을 하나로 합쳐 arr3 = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 배열로 만들고 싶다. 기존에는 아래와 같은 방법으로 합쳤을..
[ React ] 리액트 Map 과 데이터 랜더링
이번 게시글에선 Map 을 사용해 데이터를 직접 랜더링해보는 과정을 볼 것이다. 이전 게시글의 소스를 기반으로 수정하여 사용했음을 참고. 이번엔 직원이름, 연차를 입력받아 등록하는 화면을 만들고자 한다. 사용하게 될 js 파일을 먼저 요약정리부터 해본다면 아래와 같다. App.js - 메인컴포넌트. UserInput.js ( 입력폼 ) 과 UserProfileList.js ( UserProfile Data List ) 를 호출. UserInput.js - 신규 유저를 등록하는 입력폼 컴포넌트. UserProfileList.js - 유저의 정보 ( JSX ) 를 가지고 있는 List 컴포넌트. UserProfile.js - 각각 개별의 유저 정보 컴포넌트. 먼저 메인 컴포넌..