목차 Introduction 하나의 input 상태관리 여러개의 input 상태관리 Conclusion 📌 Introduction 안녕하세요. 오늘은 react에서의 input관리에 대해서 알아보겠습니다. vue에서는 깔끔하게 v-model로 관리를 할 수 있지만 react에서는 해당 기능이 없어 조금 복잡하지만 잘 설명을 해보겠습니다.🎉 📌 하나의 input 상태관리 일단 하나의 input 상태관리는 비교적 쉽습니다. useState를 이용하여서 text를 바꿔주고 value로 연결을 시켜주면 됩니다. import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(""); const onC..
목차 Introduction 설정 기본적인 mdx controls argTypes Advanced argTypes 전체적인 코드 Conclusion Reference 📌 Introduction 안녕하세요! 오늘은 storybook을 mdx로 하는 법에 대해서 알아보겠습니다. mdx로 작성하는 이유는 docs를 만들기 위함입니다. 그럼 한번 떠나볼게요~ 📌 설정 일단 Docs는 자동적으로 parsing해서 만들어주곤 합니다. 그러나 만들지 않은 것에 대해서 만드는 부분이 조금 그래서 저는 설정을 꺼주려고 합니다. // preview.js import { addParameters } from "@storybook/vue"; addParameters({ docs: { page: null } });📌 기본적인 ..
목차 Introduction Implement MyButton MyButton story Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 간단하게 뷰로 MyButton을 만들고 그걸 storybook으로 한번 활용 해보겠습니다. 🎉 📌 Implement MyButton MyButton은 간단하게 색을 props로 받아 변경하는 것으로 구현을 해보겠습니다. export default { name: "MyButton", props: { btnType: { type: String, default: "blue", }, }, computed: { btnTypeClass() { return `my-button__${this.btnType}`; }, }, methods: { onC..
목차 Introduction 초기 설정 Conclusion Refernce 📌 Introduction 안녕하세요. 오늘은 storybook6를 vue에 적용하는 법을 알아 보겠습니다.🎉 storybook/cli를 통해 간단하게 초기 설정을 해보겠습니당 📌 초기 설정 해당 버전은 vue2에 기준하여 진행을 합니다. 먼저 vue project를 하나 만들어주세요 vue create vue-storybook6 그런 뒤에 해당 폴더에서 storybook/cli를 통해 storybook 초기 설정 template을 가져옵니다. cd vue-storybook6 npx -p @storybook/cli sb init 📌 Conclusion 이렇게 새로운 storybook 사용에 대해 준비를 해보았습니다. 다음 포스팅은..
📌 목차 Introduction useState useState call back function Conclusion 📌 Introduction 안녕하세요. 오늘은 드디어 react hooks중 하나인 useState에 대해서 알아보겠습니다. 📌 useState 간단하게 counter를 만들어 보겠습니다. useState(arg) // useState안에 인자는 초기 값을 설정합니다. const [number, setNumber] = useState(0); // 그리고 array를 반환하게 되는데 첫번째 인덱스는 값, 두번째 인덱스는 number를 설정하는 함수를 반환합니다. import React, { useState } from "react"; function Counter() { const [num..
📌 목차 Introduction Conditional Rendering Condtional Props Conclusion 📌 Introduction 안녕하세요 오늘은 react에서의 conditional rendering에 대해서 알아보겠습니다. conditional rendering은 vue에서의 v-if 같은 녀석이라고 생각하시면 편할거 같아요. 📌 Conditional Rendering 일단 먼저 Hello에게 props로 isSpecial을 넘겨주겠습니다. import React from "react"; import Hello from "./Hello"; import Wrapper from "./Wrapper"; function App() { return ( ); } export default A..
📌 목차 Introduction What is Props Implementation Props Children Props PropTypes DefaultProps Conclsution 📌 Introduction 안녕하세요. 오늘은 이제 react props에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 What is Props props는 properties의 줄임말입니다. 이 props는 상위의 부모요소가 하위인 자식요소에게 데이터를 전달할때 쓰입니다. 📌 Implementation Props 간단하게 App.js 에서 Hello.js에 props로 전달을 해보겠습니다. // App.js import React from "react"; import Hello from "./Hel..
📌 목차 Introduction v-model(value, event) v-model argument mutilple v-model Conclusion Reference 📌 Introduction 안녕하세요. vue3에서 v-model에 새로운 기능들이 있어서 이렇게 포스팅을 작성하게 되었습니다. 해당 코드는 여기서확인 할 수 있습니다. 📌 v-model(value, event) 새롭게 바뀐 vue3에서는 이제 props로 value와 input 이벤트로 v-model을 사용할 수 없습니다. value -> model-value @input -> @update:model-value 로 바뀌었습니다. 📌 v-model argument 이런식으로 name을 지정해 줄 수 있습니다. // MyName.vue ..
