우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는 SPA (Single Page Application) 방식 - 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 새로운 페이지를..

create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있다. ※ 참고 css-loader : @import, url() 등의 구문을 해석, 적용해 준다. style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. css를 적용할 수 있는 방법들에 대해 알아보자. 1. 인라인(inline) styling 적용 - html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력한다. - 속성명은 케밥 케이스(kebab case)가 아닌, camelCased property names 를 사용한다...

https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i { console.log(number); }); - 앞으로 알아가겠지만 맵으로는 for문보다 더 좋은 장점들,..

1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydown onKeyDown 키보드 버튼이 눌린 경우 ( 값 입력전에 발생하며, shift, alt, ctrl 등 특수키에 동작한다. ) (한/영, 한자 등은 인식불가) ke..

https://ko.reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/hooks-reference.html#usestate 1. state란? - 일반적으로, 컴포넌트의 내부에서 변경가능한 데이터를 관리해야할 때 사용 - 프로퍼티(props)의 특징 : 컴포넌트 내부에서 값을 바꿀 수 없음 값을 바꾸어야하는 경우 >> state를 사용 - 값을 저장하거나 변경할 수 있는 객체. 보통 이벤트와 함께 사용 됨 - 컴포넌트에서 동적인 값 >> state >>동적인 데이터를 다룰 때 사용됨 ※ 참고 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 즉 State, Life Cycle 등등 이 없기 떄문에 클래스형..

https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - props(properties의 줄임말) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용(단방향 데이터 흐름) - 수정할 수 없음(자식입장에선 읽기 전용인 데이터) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 1) 1개의 프로퍼티 넘기기 - 앞서 3개의 컴포넌트를 만들어 다음과 같은 화면을 구성하였다. (Header, Footer, Main) - 이와 같이 단순한 하드 코딩을 props를 통해 개선해 보자. - App 컴포넌트에서 Main컴포넌트에 "name"이라는 이름, "갓대희..