전체 글
-
CSS - FlexHTML & CSS 2022. 4. 1. 12:21
Flex 컨테이너에 적용하는 속성들 display : flex; .container { display : flex; } : 내용물만큼의 크기를 차지한다. 배치 방향 설정 .container { flex-dirction: row; flex-dirction: column; flex-dirction: row-reverse; flex-dirction: column-reverse; } row : 아이템들이 행 방향으로 배치 row-reverse : 아이템들이 역순으로 행 배치 column : 아이템들이 열 방향 배치 column : 아이템들이 역순으로 열 배치 줄넘김 처리 설정 .container { flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; } ..
-
react기초 - 노마더코더 ( 트위터 클론코딩 )ReactJS 2022. 3. 13. 14:33
- create-react-app의 React.js application의 경우 환경변수 설정 시 : REACT_APP_'SOMETHING' : 깃에 올린다면 변수만 보임 / key나 url은 볼 수 없음 / 완전히 보안되는 것도 아님! -Fragment : 많은 요소들을 render하고 싶을 때 사용, 부모 요소가 없을때 - router의 exact path : 주어진 경로와 딱 맞아야만 해당 컴포넌트 랜더링 - Absolute import //jsconfig.json { "compilerOptions" : { "baseUrl": "src" }, "include":["src"] } ex) import Button from 'components/Button'; 처럼 ./ 을 사용안해도 됨. - es6 문..
-
react기초 - 노마더코더 ( 영화 웹 서비스 만들기 ) - hookReactJS 2022. 3. 12. 09:36
- React.useState let a = 0; function ab() { } // 같음 const [a,ab] = React.useState(0);// 배열로 [0,f] 로 들어가있음 - state 변경 방식 const [counter, setCounter] = React.useState(0); const onClick = () => { // 1. setCounter(counter+1); // 2. setCounter(current => current+1); 1. 직접 값 설정 : 별로 좋은 방법x , counter가 다른 곳에서 update 될 수도 있음 2. 함수를 전달하기 : current의 첫번째 argument는 현재값 / return값이 새로운 state -> 더 안전 - React.me..
-
react기초 - 노마더코더 ( 영화 웹 서비스 만들기 )ReactJS 2022. 3. 11. 11:52
화살표 함수 function a(){ return(); } // 두 개의 의미는 같다! const b = () => ( ); - react는 UI에서 바뀐부분만 업데이트 해줌 기존의 바닐라같은 경우는 해당태크 및 body태그가 함께 업데이트됨. - State : 기본적으로 데이터가 저장되는 곳 - React.useState let a = 0; function ab() { } // 같음 const [a,ab] = React.useState(0);// 배열로 [0,f] 로 들어가있음 - 데이터가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh한다. - state 변경방식 1. 직접 할당 : setState(state+1) - 현재 state랑 관련이 없는 값을 새로운 state로 하고 싶은 경우 2...
-
react기초4 - CRUD(Update , Delete 편)ReactJS 2022. 3. 8. 12:32
UPDATE form - input value에 props값을 넣으면 수정이 안된다. (props의 값은 readonly - 스테이트화 constructor(props){ super(props); this.state={ title:this.props.data.title } } - 스테이트가 바꿔야하는 근거는 없다 -> 값이 바뀔려면 onChange특성을 사용한다. - textarea : 값은 value값으로 설정 - 이벤트가 발생하는 태그의 이름 - 대괄호문법 // ex this.setState({[e.target.name]:e.target.value}) ** 스테이트 업데이트 (push) var _contents = Array.from(this.state.contents); _contents.push(..
-
react기초3 - CRUD(Create 편)ReactJS 2022. 3. 7. 16:53
CREATE - 이벤트핸드러 : 이벤트가 실행되었을 때 실행되어야하는 함수 - onChangePage / onChangeMode / onSubmit 이벤트 - UI에 영향을 주지않으면 state에 넣을 필요가없다 - 불필요한 랜더링 발생할 수 있음 Contents 변경시 - 배열에 데이터 추가 방식 1. push 오리지널 배열값이 변경 2. concat 오리지널 배열값에 추가 / 원본 변경 X / 새로운 배열이 리턴 성능개선에 유리 - shouldComponentUpdate( ){} : render() 이전에 실행 return true; 시 render 호출 return false; 시 render함수 호출 X shouldComponentUpdate(newProps, newState){ newProps...
-
react기초2ReactJS 2022. 3. 7. 12:09
* class 안에 함수는 function을 안붙여도 된다! * App.js에서 쓰는 것은 유사 자바스크립트 - jsx ( 페이스북에서 만듬 ) 1. 컴포넌트 - 하나의 최상위 태그로 시작해야함 - Component 분리 시 // Component 파일 // 1. 컴포넌트 클래스 로딩 import React, { Component } from 'react"; // 2. 외부에서 사용할 수 있게 허용 export default TOC; // App.js에서 임포트 import TOC from "./components/TOC"; 2. props ( 컴포넌트 내의 속성 ) - 컴포넌트를 변경 시 사용자에게 제공 - 컴포넌트 조작 가능 - 쓰는방법 EX // App.js // Subject Component {..
-
react 기초1ReactJS 2022. 3. 7. 11:26
1. 파일 만드는 법 cmd 창 create-react-app . 2. 개발환경 실행 npm runs start 실행 중지 : ctrl + c 3. 각각 디렉토리 구조 public - index.html : 컴포넌트가 들어가는 곳 / 안에 들어가는 컴포넌트는 src에서 수정 src - index.js : 진입 파일 ReactDOM.render(, document.getElementById('root')); // 1. document.getElementById('root') : root는 index.html의 root // 2. import App from './App'; // : 컴포넌트 - App.js : 실제 구현(출력) 파일! / 가장 바깥쪽에 태그하나는 있어야함! 함수 방식과 클래스 방식 존재 함..