코딩/ReactJS (27) 썸네일형 리스트형 ReactJS 디자인 초보를 위한 부트스트랩 사용하기 1. 개요 리액트로 웹페이지 만들어보고싶은데 디자인똥손이라면 리액트 부트스트랩을 사용하면 이미 예쁘게 만들어진 디자인을 가져다 쓸 수 있음 2. 설치하는 방법 npm install react-bootstrap bootstrap 위 명령어 입력해서 부트스트랩 설치 3. 사용법 import 'bootstrap/dist/css/bootstrap.min.css'; app.js파일에 위 코드 삽입하면 셋팅 끝 https://react-bootstrap.github.io/components/alerts React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 위 사이트에 접속해서 다양한 컴포넌트 .. ReactJS 프로젝트에서 빌드가 뭔지 알아보자 1. 개요 웹브라우저는 HTML, CSS, JS만 해석 가능 그러므로 웹브라우저는 리액트의 JSX 문법을 해석 할 수 없음 빌드란 JSX파일을 HTML파일로 변환하는 과정임 2. 빌드 방법 npm run build 리액트프로젝트 폴더에서 위 명령어 실행하면 build 폴더 생성됨 거기에 App.js에서 열심히 코딩한 JSX코드가 HTML, CSS, JS파일로 변환되어 담기게 됨 build 폴더의 내용물을 서버에 올리면 배포까지 끝나는 것 참고로 public 경로에 있는 파일들은 빌드해도 그래도 남아있음 ReactJS 필수 개념, props 알아보기 1. 개요 컴포넌트를 만들어서 쓰다보면 다른 컴포넌트에서 만든 state를 사용할 수 없다는 사실을 깨닫게 됨 그럼 모든 컴포넌트에서 같은 state를 쓰고 싶을때 각각의 컴포넌트에다가 state를 선언해야하나? 다행히도 리액트에는 props라는 개념이 존재함 부모 컴포넌트 안에 자식 컴포넌트가 들어있다면, props를 이용해 state를 전달할 수 있음 근데 제한사항이 있어서 자식 컴포넌트끼리 혹은 자식으로부터 부모 컴포넌트에게로의 전달은 불가능 2. 코드 import {useState} from 'react' function App(){ let [글제목, 글제목변경] = useState(['1번제목','2번제목']); return( ) } function Babycomponent(props)){ re.. reactjs에서 반복문으로 HTML태그 만들기 1. 개요 map 함수를 알아야 함 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌 [1,2,3].map(function(i){ console.log(i); }) 2. 코드 예를 하나 들어봅시다 import {useState} from 'react'; function App() { let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']); return ( { 글제목.map(function(a, b){ return( 글번호 : {b+1} {a} ) } } ) } state에 글제.. 리액트 프로젝트가 실행안될때(react-scripts 배치파일 어쩌구) 리액트 프로젝트를 실행하려고 npm start 위 명령어를 실행했는데 react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이런 메시지가 뜬다면??? npm update 위 명령어를 실행해서 현재 필요한 라이브러리들을 설치해줍니다. 이런 오류가 뜨는 이유는 리액트 소스코드를 실행하기 위한 라이브러리가 없기 때문인데, 보통 깃허브에서 리액트 소스코드 다운받아와서 그냥 실행했을때 생기는 오류입니다. 그래서 npm update를 통해 해당 코드에서 요구하는 라이브러리들을 다운받고 다시 npm start를 해주면 정상적으로 리액트 프로젝트를 실행할 수 있습니다. reactjs로 동적인 UI 만들어보기 1. 개요 동적인 UI 만드는 STEP HTML, CSS로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성 2. 코드 import {useState} from 'react'; function App() { let [card, setCard] = useState(false); return( { if (card==true){ setCard(false) } else { setCard(true) }}> 카드 컴포넌트 보여주기 {card == true ? : ''} ) } function Card() { return( 카드컴포넌트 ) } 우선 Card 컴포넌트를 만들어주고 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌.. reactjs에서 component로 편리하게 HTML덩어리 관리하기 1. 개요 컴포넌트는? 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구 커다란 페이지를 컴포넌트화 해두면 편함 자주 변경되는 UI를 컴포넌트화 해두면 편함 함수 만들고, return() 안에 HTML 담고, 형태로 쓰면 됨(도 됨) 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것 2. 코드 function Card() { return( 카드임 ) } 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임 function 뒤에 컴포넌트의 이름을 쓰면 되고 return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨 function App() { return( ) } function Card() { return( 카드임 ) } 이런식으로 코드 짜면 .. reactjs 필수스킬, state 변경함수 동작원리 알아보기 1. 개요 state 변경함수는 기존state와 신규state가 동일하면 동작을 안함 이런 특징 때문에 state 변경함수 사용 시 주의사항이 있음 일반적인 문자열이나 숫자 데이터는 그냥 조건 없이 state변경 함수로 state 변경 가능 근데 array랑 object는 저장된 데이터가 아닌, [데이터를 감싸는 괄호]가 state와 연결되는 형태임 그래서 그냥 바꾸면 안되고 [...state명] 형태로 써줘야함 대괄호 열고 점(.) 3개 찍고 state명 입력하고 괄호 닫아줘야 한다는 뜻임 이렇게 하면 array의 괄호를 벗기고 새로운 array를 만들어줌 (기존의 array와 별개의 array가 만들어진다는 뜻) 이거 안하면 기존state와 신규state가 동일한 걸로 인식됨 (괄호 안에 들어있는 데.. 이전 1 2 3 4 다음