본문 바로가기

분류 전체보기27

리엑트 hook input 여러개 대응(eval) 클레스형 컴포넌트에서는 방법이 아래와같다. //클레스형 컴포넌트 인풋 여러개 대응 const hangleChange =(e)=>{ this.setState({ [e.target.name]:e.target.value }) } 흠...그럼 함수형은 어떻게 해야하지??? 고민을 하다가.. 아래와 같이 짜봤다. eval은 지양하라고 하나... 잘 되면 되는거 아닌가? 이부분은 확인이 좀 더 필요하긴 하겠다. //함수형 인풋 여러개 대응 const handleChange = (e) => { const variableName = String(e.target.name).charAt(0).toUpperCase() + String(e.target.name).slice(1); eval("set" + variableName.. 2021. 7. 27.
리엑트 children 공부중에 render props, children 관련해서 너무너무 햇갈려서 정리를 해보기로 했다. 먼저 예제 코드부터... //App.jsx import Mycomponent from "./components/Mycomponent"; function App() { return 하늘하늘뭉게뭉게; } export default App; //Mycomponent.jsx import React from "react"; function Mycomponent(props) { return 기본상태; } export default Mycomponent; 간단한 코드이다. 결과 화면은 다음과 같다. 그렇다면 App.js에서 Mycomponent 내부에 하늘하늘뭉게뭉게 글자들은 어디에 있는걸까? 콘솔을 찍어보자. //M.. 2021. 7. 27.
리엑트 - 왜 쓰나 해당 포스팅은 개인적인 공부를 위한 포스팅입니다. 잘못된 정보가 있을 수 있거나, 지나치게 축약되어 표현한 내용이 있을 수 있습니다. 리엑트를 사용하는 이유는 데이터 변화에 따르는 화면 반영. 바닐라js를 사용하는 방법보다 압도적으로 편리해서 그렇습니다. 비즈니스 로직과, 화면에 관련된 로직이 뒤섞이는 일들을 막아주기도 하고요. 변화하는 데이터, 어떻게 화면에 반영하지? 라는 고민 좋아요 버튼을 눌렀다. 데이터가 변화했다. 10 에서 11로. 그럼 화면반영을 어떻게 해야하지? 데이터 변화에 따른 화면반영 작업들, 어떻게 하면 일관적이고 쉽게 작업할 수 있을까? 리엑트가 선택 한 것 기존 뷰를 날려버리자. 새로 갈아 끼우자. 그러므로 마주하는 이슈 성능. 계속 다시 그릴 것인가? 얼만큼 다시 그릴 것인가?.. 2021. 7. 23.
제자를 받다. 퍼블리셔 커리큘럼 내게 가장 친한친구에게 나한테 퍼블리싱을 배우라고 몇 번 말했던 적이 있다. 마침 내가 FE 전직 준비를 전일로 할 때와 그 친구의 공백기가 겹쳐서 제자를 받게? 되었다. 해당 내용은 그 친구의 트레이닝 일정 및 지도관리를 위해서 작성하며, 누군가에게는 참고가 될 수도 있을 거 같아 기록을 남겨놓는 의미로 오픈해둔다. scss커리큘럼은 편의상 제외한다. --- 아래와 같은 것들을 할 수 있는 신입으로의 준비를 목적으로 두며 기본적인 주교재는 유튜버들의 영상을 기본으로 한다. 학습자는 매일 8시간이상의 학습을 기본으로 한다. 매일1-2시간정도의 과외 및 피드백 시간을 가지며, 매일 숙제가 있다. 3달 내외의 기간을 교육기간으로 목표한다. --- js의 경우 가급적 간단하게 다루려 하였으나 시류를 고려 할 .. 2021. 2. 8.