본문 바로가기
SMALL

🖊️Programming Language/📌React15

[React] 마치며. . . 📌props & state의 차이점과 자유롭게 사용하는 법. 조금 더 숙지하기 📌immutable의 중요성에 대해서 공부해보기. 원본을 바꾸지 말자! 📌redux 📌React native 📌TypeScript 💡 강의를 다 듣는데 2주 반 정도 걸렸다. 중간에 일주일 정도는 학교 발표 수업 준비한다고 아예 못 들어서 그 외에 일주일하고 반을 걸쳐서 들었다 학교에서 배우지 않는 언어를 새롭게 접해보고, 강의를 끝까지 완강했다는게 뿌듯했다. 이걸 어디에 써먹어볼지 생각하다가 취업을 하게되면 첫번째 과제가 '게시판'이라는 말을 들은 적이 있어서 만들어볼까 싶었는데 음음 아직 모르겠다 게시판 만들고 내가 내 도메인 사서 서비스도 해보고 싶긴한데 구체적인 컨텐츠를 정하질 못해서 어떻게 될지 모르겠다 일단 무슨 페.. 2021. 5. 20.
[React] Update & Delete 기능 구현 - delete 구현 Study. React Update & Delete 기능 구현 [delete 구현] 📌delete를 누르면 먼저 정말 삭제할건지 물어본다. 그리고 누구를 삭제할건지, 어떤 내용를 삭제할건지 📌splice: 어디서부터 어디까지 삭제할건지 📌App.js 📌삭제 완료 💡 delete 끄읕-! 2021. 5. 20.
[React] Update & Delete 기능 구현 - state 변경 Study. React Update & Delete 기능 구현 [update 구현: state 변경] 📌props로 들어온 데이터를 state로 만들고 form과 동기화 시켰는데 update를 하려면 어디를 업데이트 할지 식별자가 필요함 이때, id는 존재하지만 눈에 보이지 않도록 type="hidden"을 줌 그리고 onSubmit이라는 이벤트가 발생할 때 id값도 추가하고 state로 변경 📌UpdateContent.js constructor(props){ super(props); this.state = { id:this.props.data.id, title:this.props.data.title, desc:this.props.data.desc } this.inputFormHandler = this... 2021. 5. 20.
[React] Update & Delete 기능 구현 - form 작업 Study. React Update & Delete 기능 구현 💡 아까 실행했을 때 에러가 나서 검색해서 고쳐도 해결이 안되길래 결국 이고잉님 코드 변경 사항에서 일일이 확인해보니까 내 코드에 오타가 있었다.. =을 -라고 적었던 것.. 아무튼 이제 오류가 나지 않는다 ㅎㅅㅎ [update 구현: from 작업] 📌update 버튼을 클릭했을 때 title에 원본이 남아있게 하기 📌input 태그 안에서 value={this.props.data.title} 이렇게 title 안에 저장된 값이 남아있게 함 📌UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component{ render(){ cons.. 2021. 5. 19.
[React] Create 기능 구현 - immutable Study. React Create 기능 구현 [create 기능 구현: immutable] 📌immutable: 불변성, 원본을 바꾸지 않는다 📌React 컴포넌트의 state를 변경해야 할 땐, 꼭 setState를 사용해야 하며, 그 과정에서 기존 객체의 값을 직접적으로 수정해서는 안된다. 📌부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들 또한 리렌더링되는 것은 React의 기본 속성 📌코드상에서 불변함을 유지하여 원본을 바꾸지 않는다면 최적화할 때 아주 쉽게 할 수 있음 📌그러나 기존의 객체를 건들이지 않고 새 객체를 생성하여 불변함을 유지하면서 값 업데이트를 해야하는 경우, 코드를 작성하다보면 가끔씩 복잡해질 때가 있음. 이 작업을 쉽게 해줄 수 있는 것이 Immutable.js 📌Immutabl.. 2021. 5. 16.
[React] Create 기능 구현 - mode 변경 & ShouldComponentUpdate Study. React Create 기능 구현 [create 기능 구현: mode 변경] 📌지금까지 CreateContent 컴포넌트에서 onSubmit 이벤트가 발생했을 때 _title, _desc값을 넘겨주기까지 끝 📌그다음에는 state의 contents 값 맨 뒤에 사용자가 입력한 값을 추가하는 부분을 진행 📌max_content_id : ui에 영향이 없기 때문에 state값이 아닌 일반 변수로 지정 📌App.js 에 onSubmit부분에 아래 코드를 추가 📌setState가 없으면 contents에 무엇이 추가되었는지 모르기 때문에 꼭 setState를 적어주어야 함 }else if(this.state.mode === 'create'){ _article = } 📌그리고 추가할 내용을 입력하고 .. 2021. 5. 9.