Frontend 개발자 - hyo.loui

🎯목적 : DropDown componenet 생성 > 개선 PostTitle componenet 생성 1. DropDown Layout 만들기 const DropDown = ({ defaultValue, options, }: DropDownProps) => { const handleChange = (e: React.ChangeEvent) => { e.preventDefault(); }; return ( {options.map((option) => ( {option} ))} ); }; export default DropDown; prop 으로 전달받은 defaultValue / options 를 활용해 select-box로 보여주는 컴포넌트를 작성했다. 처음엔 라이브러리를 가져와서 활용하려고 했으나, t..

❤️‍🔥TIL : Today I Learned https://youtu.be/0-aYlQErLa8 작업 컴포넌트 구조 App.jsx/ pages/ Header.jsx Input.jsx TodoList.jsx App.jsx 메인이 되어 하위 컴포넌트를 모두 가지고있는 컴포넌트, 기본 state를 (데이터 테이블)갖고 있게 하여 하위 컴포넌트에 state를 props 전달하였다 (컴포넌트 폴더) pages/ Header.jsx children 활용하여 하위 컴포넌트에 text 를 내려주는 컴포넌트 Input.jsx input 박스의 변화(타이핑)를 감지하여 onChange 함수를 실행하게 하고, 감지한 값을 setState로 넣는다. 여기서 어려웠던 부분은 buttonClickSubmit 이였다. 새로고침 ..

에러 내용 VM21:1 Warning: Cannot update a component (`App`) while rendering a different component (`TodoList`). To locate the bad setState() call inside `TodoList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at TodoList (http://localhost:3000/static/js/bundle.js:413:5) at div at App (http://localhost:3000/static/js/bundle.js:38:76) 에러 이유 : 컴포넌트에서 호출하고 있는 setSt..

❤️‍🔥TIL : Today I Learned Component : 컴포넌트 - 컴포넌트는 UI를 재사용이 가능하도록 개별적인 여러 조각으로 나눈다. - 컴포넌트는 개념적으로 'JavaScripts - 함수'와 유사하다. 'props'라는 입력을 받아, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. - Element는 일번 객체(plan object)로 React 앱의 가장 작은 단위이며, 컴포넌트의 '구성 요소' 다 - 컴포넌트를 선언하는 방식에는 우리가 주로 사용하는 함수형 컴포넌트, 클래스형 컴포넌트가 있다. 함수형 컴포넌트 : function component function isComponentName(props) { let javascriptArea; return JS..

❤️‍🔥TIL : Today I Learned 구조 분해 할당 - 자바스크립트 표현식 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. (출처: MDN) 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b..