전체 글349 React(17) Immutable 개념 리액트 컴포넌트의 state 를 변경시, 무조건, setState 를 통해서 업데이트 해주어야 하며, 업데이트 과정에서 기존 객체의 값을 직접적으로 수정하면 절대!! 안됩니다. 언제나 기존객체는 불변함을 유지시켜주어야 합니다. 자칫 잘못했다 나중에 최적화를 제대로 못하게 되는 일이 발생하죠. "데이터를 이리저리 주고받는 과정에서 데이터는 변하면 안된다. 예를 들어 데이터를 추가할 때 push()는 데이터뭉텅이(배열) 원본으로, concat()은 복사본으로 작업한다. → 그래서 원본이라는겨 복사본이라는겨? 굉장히 헷갈리며 일관성이 떨어짐 이때 Immutable 라이브러리를 사용하면 원본은 킵하면서 복제본의 결과만 일관성있게 바꿔준다." Immutable 을 사용 할 때는 다음 규칙들을 기억하세요: 객체는 .. 2021. 1. 8. React(16) Create 구현 : shouldComponentUpdate shouldComponentUpdate 란? 얘는 state가 변경되거나 부모 컴포넌트로부터 새로운props를 전달받을 때 실행되는 메소드다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라 re-render를 할지에 대한 여부를 결정 shouldComponentUpdate 메소드는 true를 반환 (But React 개발자는 re-render를 원치않으면, return false로 놓고 할 수 있다.) 요새 고민은... 부모가 호출되면 → 하위 자식들 등.. 렌더함수가 줄줄이 호출된다. 그리고 그 자식 중 하나인 은 create에 입력하면 그 글을 글 목록에 추가시켜주는 역할을 한다. BUT 불합리하다. create기능 안써도 같이 딱히 필요없는 자식도 매번 불필요하게.. 2021. 1. 8. React(15) Create 구현 : onSubmit이벤트 & contents변경 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : onSubmit 이벤트 → 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기 App.js - this.max_con.. 2021. 1. 7. React(14) Create 구현 : 모드 전환 & form 생성 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : 모드 전환 & form 생성 create 버튼을 눌렀을 때 이 생성되며 내용이 출력된다. App.js - render( )안에 if문에 따라 각 모드에서 실행될 _article = 태그 내용을 각각 넣어주기 - retur.. 2021. 1. 6. React(13) Create구현 : 모드 변경 "상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 하위가 → 상위로 명령을 전달할때는 event로 전달한다." 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 1. create구현 : 클릭시 mode라는 state값이 달라짐 App.js 1. 이라는 사용자 정의 태그를 만든다. 2.. 2021. 1. 6. React(12) 컴포넌트 이벤트 만들기 오늘할일 - WEB을 클릭하면 welcome모드가 되며 내용이 나오고 - HTML, CSS, JavaScript를 클릭하면 read모드가 되어 세부내용이 나오는 페이지 만들기 App.js - 사용자가 WEB 링크를 클릭했을 때 이벤트가 실행되도록 하고 싶다면, - onChangePage라는 props를 만들어준다. 그 안에 핸들러메소드 넣고 + 바인드함수를 사용해 this를 명시해준다 - 핸들러 메소드 안에는 this.setState({mode:'welcome'});을적어주어서 state, 즉 모드를 바꾼다. Subject.js - 안에 onClick 이벤트를 심어준다. - onClick이벤트 안에 e.preventDefault를 사용해 이벤트 동작을 멈춘다. - 이어서 this.props.onChang.. 2021. 1. 5. 이전 1 ··· 53 54 55 56 57 58 59 다음 반응형
