Reactjs 썸네일형 리스트형 싱글페이지 어플리케이션 (SPA) 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션 (single page application) 방식으로 개발하는 것이 정석이다. 단일 페이지 어플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션이다. 기존의 전통적인 방식의 웹 페이지는 페이지를 전환 할 때마다 렌더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있었다. 단일 페이지 애플리케이션은 페이지 전환에 의한 렌더링을 클라이언트에서 처리하기 때문에 자연스럽게 작동한다. SPA 구현이 가능하려면 다음 두가지 기능이 필요하다 1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단 브라우저는 서버로 요청을 보내지 않아야 한다. 2. 브라우저의 뒤로 가기와 같.. 더보기 <ReactJs> CSS Module (styles) 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 을 사용하면 클래스이름이 중복되는 것을 완전히 방지 할 수가 있다. 언제 CSS module 을 사용해야 유용한가 1. 기존에 존재하는 프로젝트에서 특정 부분에 리액트를 도입할 때 클래스명이 겹쳐서 이상한 결과를 초래할 일이 없다. 2. 클래스 네이밍 규칙을 무시 할 수 있다. ('-'를 써주어야 하거나 대문자 소문자로 약속이 되어 있는 상태일 때) 단순하게 CSS module 을 사용해주려면 확장자를 .module.css 혹은 .module.scss 등으로 우선 작성해준 뒤에 컴포넌트에서 import 해줄 때 import styles from '~~경로 및 이름.module.css'; 위와 같이 작성해주면 CSS module을 가져다가 .. 더보기 <ReactJs> SASS 버튼에 여러 옵션 주기 (@mixin, @include) 버튼의 크기와 색상을 입혀주는 작업을 해보장> 더보기 <ReactJs>컴포넌트 스타일링하기 (SASS,버튼스타일링) SASS 는 Syntactically awesome stylesheets의 약자로서 리액트에서 뿐만 아니라 다른 웹프론트엔드 프로젝트에서도 자주 사용되는 기술이다. 아래 링크에서 더 자세하게 정보를 얻을 수 있을것이다. https://sass-guidelin.es/ko/ SASS는 CSS preprocessor(전처리기) 로써 사용하면 좋은 점들 1. 복잡한 작업을 보다 쉽게 해줄 수 있다. 2. 스타일 코드의 재사용성을 높여준다. 3. 코드의 가독성도 높아진다 (유지보수에 편하다) SASS를 사용할 때는 2개의 확장자를 사용할 수 있다. (.scss / .sass) 간단하게 코드의 차이점을 알아보자 .sass 확장자 nav ul margin:0 padding:0 li list-style:none .sc.. 더보기 <Reactjs>Input상태 관리 , 여러개 Input 상태 관리 저번에 숫자 값의 상태 관리를 useState 를 이용해서 해보았는데 마찬가지로 비슷하게 이번엔 문자값을 변화해주면서 간단한 예제로 정리해보자. 우선 InputSample이라는 컴포넌트를 하나 만들어준뒤에 실행시켜주면 이렇게 정적으로 내가 써준 내용이 보여진다. 이 상태에서 글을 입력하게 되면 이런식으로 상태값이 바뀌고 초기화 버튼을 누르게 되면 다시 빈칸으로 설정 되는 것을 볼 수 있다. 저번 숫자값을 동적으로 변화시키는 글과 달라진 점은 우선 event 를 인자로 받아서 target.value 를 써준 것인데 현재 태그에 입력되어 있는 텍스트로 값을 변화시켜야 되기 때문에 e.target.value 로 값을 세팅해준 것이다. 포인트는 'useState' 를 사용해준 것과 필요에 따라 event 속성을.. 더보기 <Reactjs>useState로 동적 문서 만들기 정적인 문서 말고 사용자와의 인터랙션을 통해 컴포넌트에서 동적으로 보여주기 위해 어떻게 하면 되는지 알아보장. 아주 고전적이고도 많이 본 숫자 증감을 예로 들어서 간단하게 원리만 파헤쳐 보겠다. 이런식으로 Counter 컴포넌트를 만들어준 뒤에 버튼을 눌러서 콘솔창을 확인해주면 +1 과 =1 이 잘 찍히는 것을 볼 수 있을 것이다. 아직은 저 0 이라는 값을 조절해주지 못하는데 'useState'를 이용해서 한번 조작해보겠당! 위 코드의 const [number, setNumber] = useState(0); number는 현재상태 , setNumber는 상태를 바꿔주는 함수, useState(0) 은 초기값으로 0을 넣어주겠다는 뜻이다. 바뀐 상태값을 보여줘야 하기 때문에 정적으로 0을 박아놨던 부분에.. 더보기 <Reactjs> Props props 컴포넌트에 사용 할수 있는 속성값으로 properties 의 줄임말로 특정 값을 전달 해주고 싶을 때 사용하는 것이라고 간단하게 정의 할 수 있겠다. 위의 코드와 같이 헬로라는 컴포넌트를 불러와서 써줄 때 헬로컴포넌트의 'name'값을 원하는 것으로 설정, 'color'를 빨강색으로 설정을 해주려면 헬로컴포넌트에서 처리를 해주면 된다. 한번 Hello컴포넌트에서 name값과 색깔을 이용해보자. 출력되는 부분에서 제대로 작동한 것을 확인 할 수 있는데 일일이 props.~~ 식으로 써주기 상당히 귀찮을 것이다. 조금 더 간편하게 사용할 수 있는 법도 같이 알아보장>< 해서 본인이 다른 이름으로 해보았는데 작동하지 않으니 *children*키워드로 사용하기 바란다! 컴포넌트는 이전에 정리했던 것처.. 더보기 <Reactjs> JSX에 대하여 우선 간단하게 JSX에 대하여 짚어보자면 'JSX는 리액트에서 컴포넌트를 정의할 때 사용되는 문법이다.' 위 사진에서 return 뒤에 있는 Hello는 딱 봤을 때 HTML코드 처럼 보인다. 하지만 이렇게 언급을 하는 이유가 있듯이 위의 저 코드는 스크립트 코드이다. 한번 Babel로 넘어가서 확인을 해보자. 추후에 Babel이 무엇인지도 간단하게 다루어 보겠다. 위의 사진을 보면 그저 Hello 와 span 태그로 문구하나를 써준것이 오른쪽의 스크립트코드로 변환 된 것을 볼 수 있을 것이다. 하지만 이렇게 스크립트 코드로 변환시켜 주려면 지켜야 하는 규칙들이 몇가지 있다. 첫번쨰!!!!! 태그는 무조건 꼭 닫혀 있어야 한다> 더보기 이전 1 2 3 4 5 6 다음
