본문 바로가기
반응형

전체 글1441

리액트 공부 - launch chrome against localhost / 투두리스트 만들기 vs 코드 내에서 리액트 실행 오류 여기서 설정을 눌러 launch.json을 url 8080에서 3000으로 바꿔도 안됨.. * 한번 실행됐던 파일의 경우 폴더 불러오면 vs 코드 내 터미널에 폴더가 이미 거기로 들어가져있어서 yarn start 명령하면 실행되는데... 일단 투두리스트를 제대로 된 구조로 만들어보자 https://velopert.com/3480 컴포넌트 폴더에 제작 시작! const TodoListTemplate = ({form, children}) => { return( 오늘 할 일 {form} {children} ); }; 이걸로 틀 생성 * 특정 div에 다른 js파일의 형식 넣을 때? 1 임폴트 import Form from './components/Form'; 2 폼 넣기 -.. 2020. 12. 26.
리액트 공부 - js 스크롤바 css 설정 / component life cycle 흐름 / 투두 리스트 앱 기획 * 스크롤바 설정 스크롤 scroll scrollbar .con::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.4); } .con::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,0.3); border-radius: 6px; } component lifecycle method 흐름 https://sass-guidelin.es/ko/ Syntactically awesome style sheets의 약어 Sass 문법적으로 멋진 스타일 시트 * Todo 리스트 만들어보기 새프로젝트 create-react-app todo-list cd.. 2020. 12. 25.
리액트 공부 - LifeCycleSample.js / handleRandomizeColor / 렌더링 사이클 확인 예제 (리액트를 다루는 기술 책 참고) LifeCycleSample.js import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, } myRef = null; constructor(props) { super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState) { if(nextProps.color !== prevState.color){ return { color: nextProps.color }; } return null; } componentDidMount(){ console.lo.. 2020. 12. 25.
리액트 공부 - 더블 클릭시 삭제 handleRemove / 라이프사이클 메소드 * 더블클릭시 삭제 handleRemove = (index) => { const { names } = this.state; //편의상 name의 레퍼런스를 미리 만든다 this.setState({ names: [ ...names.slice(0,index), ...names.slice(index + 1, names.length) ] }); } render() { const nameList = this.state.names.map( (name, index) => ( this.handleRemove(index)}>{name}) ); * 라이프사이클 메소드 DOM 생성 - 웹브라우저에: 마운트 나타남 이 과정에 사용되는 메소드: 컴포넌트 만들기 - constructor - getDerivedStateFromPr.. 2020. 12. 25.
리액트 공부 - map / input value 추가해서 아래 나타내기 자바스크립트 배열 map() 함수 arr.map(callback, [thisArg]) callback 새로운 배열 요소 생성 currentValue 현재 처리 요소 index 현재처리요소 index 값 array 현재처리 원본 배열 thisArg(선택항목) 콜백 함수 내부 this 레퍼런스 var numbers = [1,2,3,4,5]; var processed = numbers.map(function(num){ return num * num; }); console.log(processed); (5) [1, 4, 9, 16, 25] 콘솔에서 확인 가능 (결론 보기전까지는 shift + 엔터 / 결론 보려면 엔터) render() { const names = ['눈사람', '얼음', '눈', '바람']; .. 2020. 12. 25.
리액트 공부 - 화살표함수 / 리액트이벤트 (종류) / onChange / onClick / state 예외 / ref * 화살표 함수 setTimeout(function(){ console.log(“1”); }, 1000); setTimeout(() => { console.log(“1”) }), 1000); 화살표 함수는 기존 function과는 용도가 다르다 서로 가리키는 this 값도 다르다 일반 함수: 자신이 종속된 객체를 this로 가리킴 화살표 함수: 자신이 종속된 인스턴스를 this로 가리킴 function BlackDog() { this.name = ‘흰둥이’; return { name: ‘검둥이’, bark: function(){ // 우리거 console.log(this.name + ‘: 멍멍!’); } } } const blackDog = new BlackDog(); blackDog.bark(); //.. 2020. 12. 24.
리액트 공부 - props / state / onClick * props properties 줄임말. 컴포넌트 속성 설정 시 사용 용어. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 (MyCoponent의 부모 컴포넌트는 App 컴포넌트)에서만 설정 가능 App.js MyComponent.js 안녕하세요. 제 이름은 {this.props.name} 입니다. 결과 안녕하세요. 제 이름은 React 입니다. * 혹은 이렇게 해도 이름에 값을 넣어줄 수 있고 (기본 이름) class MyComponent extends Component { render() { return ( 안녕하세요. 제 이름은 {this.props.name} 입니다. ); } } MyComponent.defaultProps = { name: '기본 이름' } * 이렇게 해도 이름.. 2020. 12. 24.
리액트 공부 - 조건부 연산자 / 조건부 렌더링 / DOM 스타일링 / 모듈 import * 조건부 연산자 const condition = true; return( { condition ? '참' : '거짓' } * 조건부 렌더링 const condition = true; return( { condition && ' 보여주세요 ' } ); 이러면 false 일때는 값이 아예 안뜨고 참일 때만 ‘ 보여주세요 ’가 뜸 * DOM 요소 스타일링 const style = { backgroundColor: 'gray', border: '1px solid black', height: Math.round(Math.random() * 300) + 50, width: Math.round(Math.random() * 300) + 50, WebkitTransition: 'all', MozTransition: '.. 2020. 12. 24.
리액트 공부 - 개념/렌더링/DOM/JSX/var let 차이 함수형으로 할때 주의할 것 * React.FC = 컴포넌트 * useEffect-상태를 업데이트 할 때 무한 루프 방지 일단... 책에 나와있는대로 클래스형으로 해보았다… 개념을 정리해보자.. * 리액트 자바스크립트만으로 규모가 큰 애플리케이션을 만들 수 있는 시대 수많은 프레임워크가 조금씩 다른 관점에서 순수 자바스크립트로만 애플리케이션 관리할 수 있도록 노력해옴 (AngularJS, Backbone.js, Vue.js…: 여러 아키텍처로 애플리케이션 구조화) 이들의 공통점: Model과 View가 있다 Model: 데이터 관리 / View: 유저에게 보이는 부분 프로그램이 유저에게 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회, 수정하고 젼경된 사항을 뷰에 반영하는 식 그런데 뷰의 일부만 업데이트.. 2020. 12. 23.
728x90
반응형
LIST