Reactjs 썸네일형 리스트형 함수형 컴포넌트 클래스형 컴포넌트 리액트로 개발을 하다보면 수많은 컴포넌트들을 만들고 뿌려줄 것이다. 뤼앸 개발의 근간이 되는 컴포넌트는 크게 2가지 방법으로 만들어 줄 수 있다. Class 형 컴포넌트 , function 형 컴포넌트 2가지다. 먼저 중요하게 짚고 넘어가야 될 것은 뭘 쓰든 상관은 없다>< 본인 취향에 맞게 선택해서 쓰면 되겠지만 요즘은 최근에 나온 함수형을 많이 쓴다고 한다. 우선 어떤 차이점이 있는지 한번 살펴보면 클래스형 컴포 import React,{Component} from 'react' // Component도 같이 임포트! class Search extends Component{ // 상속!! render() { // render 함수 호출 ! return( )} } export default Search.. 더보기 Material UI 사용법 및 makeStyles 우선 material ui 가 뭔지 간단하게 짚고 넘어가자. '리액트에서 바로 쓸 수 있는 컴포넌트 형태의 UI 프레임워크' 이 한마디로 표현 완료다. 기존의 스타일링 방법을 생각해보면 구조 짜고.. 태그 붙이고.. 클래스명 붙이고.. 중복되는 스타일링 위해 클래스명 집중화 하고.. 인라인스타일링 할 거 있으면 해주고.. 따로 css 파일 만들구... 막말로 드릅게 귀찮다. 하지만 리액트 조각(component)형태의 스타일링이 가능하고 부트스트랩과 비슷하게 컴포넌트 옆에 클래스명과 추가로 몇가지 속성들을 이용해줄 수 있다. 이정도만 알아도 충분하니 사용법은 실제 코드를 보면서 한 번 정리해보장 1. 설치! npm install material-ui/core material-ui/icons 아이콘도 자주.. 더보기 react toggle 간단히 토글메뉴 구현하기 (useState) 리액트 관련해서 혼자 클론코딩식으로 버거킹 사이트를 모바일 버전일 때 특정해서 구현하고 있는데 어떠한 사이트든 사이드 메뉴, 혹은 내비게이션 바 부분을 토글식으로 구현해 놓은 곳은 많을 것이다. 한번 상태값을 관리해주는 useState훅을 이용해서 구현해보자 사진처럼 왼쪽 상단의 메뉴 버튼을 누르면 왼쪽에서 오른쪽으로 메뉴바가 쇼로록 나오게 만들면 되는 것이다. 우선 해줘야 할 것은 토글할 메뉴리스트의 상태를 관리하기 위해 useState를 사용해주는 것이다. import React,{useState} from 'react'; const Header = () => { const [isOpen, setMenu] = useState(false); // 메뉴의 초기값을 false로 설.. 더보기 json-server 사용법 및 간단히 데이터 조회 해보기 우선 json-server 가 무엇인지 알아보자! json-server는 실제 배포할 서비스용(프로덕션)이 아니라 로컬에서 혼자 연습할 때 사용하기 좋은 기본적인 Rest Api의 기능은 다 가지고 있는 아주 좋은 라이브러리이다. 1. 설치 npm install -g json-server 2. 데이터 파일 생성. (src 디렉토리 밖) 난 db.json 이라는 파일명으로 작성 3. 의미를 따지고 들면 package.json 파일 안에 dependencies 객체 안에 라이브러리가 설치되는것 보단 devDependencies 객체에 생성되는게 맞다. dependecies 객체는 라이브러리나 프레임워크 같이 실제 프로덕트에서 사용되는 애들을 모아두고 devDependencies 는 개발을 편하게 해주는 ,실.. 더보기 React 자바스크립트 배열 내장함수 map 이용해서 렌더링 하기 만약에 데이터를 서버에서 끌어왔는데 개수가 10개라고 치자. 각 개수를 나타내주고 싶은데 일일이 각 태그 안에 넣어주고 싶진 않을 것이다.. 쌉 노가다.. 버거킹 사이트를 클론하면서 공부하고 있기에 위의 사진화면 처럼 저 각각의 가게점들을 map을 이용해서 화면에 뿌려줘 보겠당! 우선 map 함수가 뭔지 알아야 될 텐데 간단히 말하면 배열을 '순회공연' 한다고 생각하면 되겠다. 배열내의 인덱스를 하나하나 돌면서 본인이 원하는 리턴값을 지정해줄 수 있다 == 자유도가 높은 배열 함수 라고 보면 되겠다. const numbers = [1,2,3,4,5]; numbers.map(number => { return number + 1; } ) numbers // [2,3,4,5,6] 어떤 느낌인지 정도만 알아두고.. 더보기 React Slick 이용 캐러셀 구현 및 커스터마이징 하기 캐러셀은 모두 알고 있을 것이다. 회전목마 처럼 주로 이미지 등을 회전시키면서 사이트의 전체적인 분위기를 좀더 동적으로 보여질 수 있게 해주는 방법인데 직접 구현할 수도 있겠지만 react-slick 라이브러리를 이용해서 간단히 구현하는 법과 커스터마이징 하는 방법까지 알아보자! 원래 bootstrap, material-ui 등 프론트 라이브러리나 프레임워크를 다룰 때 나처럼 초심자나 익숙하지 않은 사람은 본인이 원하는 대로 커스터마이징 하기가 쉽지 않을 것이다. 1. 우선 당연히 라이브러리를 설치해준다. npm install react-slick --save npm install slick-carousel --save yarn이 깔려있다면 yarn add react-slick, yarn add slic.. 더보기 리액트 컴포넌트들 스타일링 방법 2가지 (styled-components, css파일에 때려박기 ) 리액트 프로젝트를 진행하면 많은 컴포넌트가 모여서 애플리케이션을 이루고 각각의 컴포넌트들을 배치 혹은 꾸며주기 위해 스타일링을 해줄 때가 있다. 크게 2가지 방법이 있는데 이 2가지중 편한 것을 선택해서 진행하면 되겠다. 1. styled-component 우선 styled-components 라는 npm 패키지명을 가지고 있기 때문에 npm 명령어를 이용해서 패키지를 설치해준다. dependency에 추가 된 것을 확인 한 뒤에 import styled from 'styled-components'; // 1. 컴포넌트의 상단에 임포트 해준다 styled.div` // 요런식의 문법 width:80px; font-size: 50 `; styled.Remove` // 밑에서 리턴할 컴포넌트명 기재 가능 h.. 더보기 ContextAPI 쓰는 이유와 애플리케이션 동작 방식 차이 리액트 프로젝트의 동작 방식에 대해서 오늘 얘기 해 볼까 한다. 우선 contextAPI를 쓰지 않고 컴포넌트들 끼리 단계를 거져가면서 상호작용을 할 때 의 구조도를 보고있다. 간단히 바꿔서 설명하자면 컴포넌트 A, B, C, D가 있고 컴포넌트 들끼리 상태값이 영향을 주고 있는 상태라고 치면 위와 같은 방식에서는 D의 상태값이 변하면 A의 상태값이 변해야 되는데 그러기 위해 C, D 컴포넌트를 거쳐가면서 변화시켜줘야 하는 내용이다. 하지만 ContextAPI 를 사용하게 되면 음 전역변수의 개념으로 즉 전역적으로 데이터를 관리해줘야 할 때 사용 해주면 되겠다. 프로젝트의 규모가 크고 다루어야 할 데이터가 많고 변수가 많으면 용이하게 쓰이겠지만 굳이 간단한 프로젝트에서는 props를 컴포넌트들 끼리 이동.. 더보기 이전 1 2 3 4 5 6 다음
