props4 [리액트] props를 className으로 지정하기 App.jsx import Button from './components/Button' function App() { return ( ) } export default App Button.jsx className의 속성값으로 데이터 props가 오므로 백틱`` 안에 ${} 기호로 받아온 props를 넣어주면 class의 이름으로 지정된다. import React from 'react' import '../styles/Button.scss' function Button({ size, color }) { return ( 버튼 ) } export default Button Button.scss $main-color: green; .button { // 버튼에 먹여진 속성 제거 outline: none; bor.. 2022. 8. 12. [Vue] props로 문자 데이터가 아닌 다른 데이터(숫자, 객체, 선언한 데이터 등)을 전달하는 방법 props로 문자 데이터 전달 App.vue HelloWorld.vue {{ message }} props로 문자가 아닌 다른 데이터 전달 props를 전달할때 v-bind: 디렉티브를 사용해 데이터를 전달한다. 이때 v-bind는 생략하고 :만 사용할 수 있다. App.vue :v-bind를 사용해 props값으로 숫자데이터를 전달하고 있다. 만약 :v-bind를 사용해 props값으로 문자데이터를 전달하고 싶다면 쿼트로 한번 더 감싸준다. 선언한 데이터를 속성으로 가질때도 v-bind: 디렉티브를 사용한다. // data 옵션에서 생성한 message라는 데이터를 연결했다 // v-bind:로 연결했기 때문에 message는 문자열이 아니다 2022. 7. 6. [리액트/한줄정리] props와 state란? props 자식 컴포넌트가 부모 컴포넌트한테 전달받은 데이터 부모에게 전달받은 state 값 state 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터 본인 컴포넌트에 설정되어 있는 state 값 2022. 4. 12. [리액트] props란 무엇일까? (부모 컴포넌트, 자식 컴포넌트) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.3 props Props props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다. 예제를 살펴보기 전에 부모 컴포넌트와 자식 컴포넌트의 개념부터 알아보자. 부모 컴포넌트: 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트: 부모 컴포넌트에게서 불려온 컴포넌트 부모 컴포넌트 부모 컴포넌트(App)에서 자식 컴포넌트(MyComponent)를 불러오고 자식 컴포넌트의 속성을 name={"React"} 설정하였다. 이때 자식 컴포넌트(MyComponent)에서 props 객체를 전달하게 되고 그 객체 안에 name: "Re.. 2022. 3. 23. 이전 1 다음
