React
-
useState 함수형 업데이트React 2022. 12. 19. 21:29
함수형 업데이트 () 괄호 안에 값을 변경하는 코드를 작성하면 된다. 아래 코드를 보면, onClick 안에서 setNumber를 3번 호출하는 코드가 있다. 일반 useState 이렇게 하면, 나는 1씩 증가하는 코드를 3줄 넣었는데 버튼을 눌러도 1씩만 증가하는것을 확인할 수 있다. 이유는 버튼을 클릭 시, 코드가 각각 처리되는게 아니라 batch로 처리 된다. 최종적으로 한번만 실행을 시킨다는 뜻 이다. 그래서 저 코드를 100번 적어도 한번만 처리된다. number라는게 onclick 함수 바깥에 있어서 일어나는 일 같다. 함수형 useState 함수형으로 업데이트 해주었다. previousState 라는 인자는, 어디에도 없다. onclick 함수 내에만 있기에 각 줄마다 previousStat..
-
styled-componentsReact 2022. 12. 19. 21:28
styled-components 설치 명령어로 설치 yarn add styled-components 익스텐션 설치 import해오기 styled component를 만들어보자. 스타일을 변수에 담아 백틱` 을 감싸서 스타일을 적용해준다. 그리고 컴포넌트 안에 스타일 컴포넌트를 적용한다. styled component를 사용하는 이유 css파일로 구성하면, 조건부 스타일링을 구현하기가 까다롭다. 이렇게, 컴포넌트 별로 색상을 달리 해줄수도 있다. StBox 코드를 보면, 백틱 안에 코드가 담겨있기 때문에 자바스크립트를 사용하기 위해 ${} 안에 코드를 넣어준다. 부모에게 색상을 받아오기 위해 콜백함수에 props를 인자로 넣어줘서 색상을 받아온다. map을 이용하여 box를 그리고, styled-compo..
-
컴포넌트, 렌더링, 카운터 만들기React 2022. 12. 19. 21:27
컴포넌트 컴포넌트는 모든 리액트 앱의 빌딩 블록이며 일반적인 리액트 앱에는 이런 요소가 많이 있다. 간단히 말해서 컴포넌트는 선택적으로 속성(props) 같은 입력을 수락하고 UI 섹션이 표시되는 방식을 설명하는 리액트 요소를 반환하는 자바스크립트 클래스 or 함수다. 컴포넌트 꾸미기 이 화면을 최대한 비슷하게 만들어보려고 한다. function App() { const flex = { display: 'flex', alignItems: 'center', justifyContent: 'center', height:'100vh' }; const style = { padding: '30px', border: '1px solid green', borderRadius: '10px', margin:'5px' };..
-
stateReact 2022. 12. 19. 21:26
state 컴포넌트 내부에서 바뀔 수 있는 값 자주 변경될 수 있는 값을 state로 관리해준다. let을 사용해서 변경하지 않고 굳이 state를 사용하여 변경하는 이유는, lifecycle에 따라서 화면값이 변했을 때 그 변화된 값을 화면에 다시 리렌더링 시켜주기 위한 조건들이 있다. 그 조건들 중 하나가 state가 변경되었을 때이다. 물론 let으로도 변경시켜서 할당해줄 수 있지만, 그렇게 하면 react에 의해 변경된 값이 화면에 바로 반영되지 않는 문제점이 있다.(state가 바뀌었다고 인식하지 못하기 때문) useState 수 많은 Hook중 하나이다. function Child(props) { return ( { props.setName('박할아'); }} > 할아버지 이름 바꾸기 {pro..
-
propsReact 2022. 12. 19. 21:26
props 부모 컴포넌트 로부터 받아온 데이터 부모 -> 자식 방향으로만 전달이 가능하다. function App() { return ; } function GrandFather() { return ; } function Mother() { const name = '묭이'; return ; } function Child() { return 연결 성공; } 위 코드에서 Mother 에 있는 name값을 가져오고 싶으면 아래와 같이 props를 사용하자. function App() { return ; } function GrandFather() { return ; } function Mother() { const name = '묭이'; return ; } function Child(props) { conso..
-
JSXReact 2022. 12. 19. 21:25
JSX 함수로 만들어진 위 컴포넌트들이 HTML 태그를 사용하듯이 코드를 작성하는 방식 할아버지-엄마-자식 컴포넌트를 만들어 보기 function Child() { return 나는 자식입니다. 연결성공; } function GrandFather() { return } function Mother() { return } function App() { return } JSX는 1개의 Element만 반환할 수 있다. function App() { return 이렇게 두개의 엘리먼트를 넣으려고 하면 에러가 납니다. } JSX에서 자바스크립트를 사용하려면 "반드시" 중괄호를 써야한다. 그렇지 않으면 단순 문자열로 인식이 된다. function App() { const cat_name = 'perl'; retu..
-
리액트 설치 및 컴포넌트React 2022. 12. 19. 21:25
리액트 입문 리액트란? spa 전재, virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에 리렌더링 잦은 동적인 모던웹에서 향상된 퍼포먼스를 낼 수 있음 spa 하나의 마크업 html파일을 받아, 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시하기에 사용자가 페이지를 다시 로딩할 필요가 없어짐(깜박임이 없음) DOM 웹페이지를 우리가 사용하는 자바스크립트와 같은 프로그래밍 언어와 연결해주어 화면에 그려진 UI요소를 검색할 수 있게 해줌 virtual DOM 실제로 렌더링 되지는 않았지만 실제 DOM구조를 반영한 상태로 메모리에 있는 "가상의 돔", 즉 리액트가 가상돔의 변화를 실제 옴에 적용하지 않는 이상은 아무리 많은 조작이 가상 돔에 일어나도..
-
리액트에서 이미지 추가하기(초간단)React 2022. 12. 19. 21:24
CSS로 이미지 추가하기 height: 300px; background-image: url(경로); background-size: cover; background-position: center; html에 id나 class 지정하고, css로 이미지 추가하기. HTML로 이미지 추가하기 1. import 하기. import 작명 from '이미지경로'; 2. html 코드 추가 import './App.css'; import 작명 from '이미지경로'; function App() { return ( ); } 이미지,txt.json 등 수정이 필요없는 static 파일의 경우 public폴더에 보관해도 된다. 이 경우, import 할 필요 없고, 경로만 입력해주면 된다. 그러나 배포 시 생길 수 있는 ..
-
리액트에서 부트스트랩 사용하기React 2022. 12. 19. 21:23
부트스트랩 홈페이지 바로가기 1. 터미널에 npm install react-bootstrap bootstrap 입력 2. index.html -> link 추가 2-1. css -> import 하기 둘중하나 선택해서 진행 3. 부트스트랩을 사용할 파일에 사용할 종류 import 하기 여러개 사용하려면 아래와 같이 import 해도 괜찮음 import { Button, Container, Nav, Navbar } from 'react-bootstrap'; 4. 코드 붙혀넣기 import { Button, Container, Nav, Navbar } from 'react-bootstrap'; import './App.css'; function App() { return ( Navbar Home Featur..
-
Component, map(), propsReact 2022. 12. 19. 21:22
component 어떨 때 컴포넌트를 사용하는지 반복적인 html을 축약 하고 싶을 때 큰 페이지들을 컴포넌트로 만듦 자주 변경되는 UI 컴포넌트 만드는 법 1번째 방법 function Modal() { return ( 제목 상세내용 상세내용 ); } export default Modal; 2번째 방법 const Modal = () => { return ( 제목 날짜 상세내용 ); } export default Modal; 3번째 방법 export default function Modal() { return ( 제목 날짜 상세내용 ); } function 만들기 return 안에 html 작성 default 해서 넘겨주기 만든 함수를 쓰고싶으면 import 해오기 import Modal from './c..