skylove1982

일반적으로 React 에서 컴포넌트를 만들때 에로우 함수를 사용하여 아래와 같이 구현을 하는데요. 클래스 형태로 컴포넌트를 사용하는 방법도 어렵지는 않습니다. const App = () => { return ( ) } 클래스는 class 라는 키워드와 함께 extends 를 사용하고 React.Component 를 하고 중괄호로 묶어주고 render 함수안에 구현을 하면 됩니다. 컴포넌트가 함수 형태 이든 클래스 형태이든 아직은 공부하는 중이라서 크게 차이는 모르겠지만 프로그래밍을 공부해오신 분들이라면 class 형태를 더 권장하실 수도 있을것 같습니다. class App extends React.Component { render() { return ( ) } }

React 에서 useEffect 함수 사용하는 예시입니다. useState 가 사용되었지만 참고사항으로 보시면 될것 같구요. useEffect 는 처음에 기본적으로 한번 실행이 되고 나중에 변수값이 업데이트가 될때마다 실행이 되게 되는데요. 여기서 사용되는 변수의 이름은 currentCount 입니다. 버튼을 클릭할때마다 값이 1 씩 증가되는데요. (props.incrementBy 값은 버튼 속성으로 설정된 값입니다.) 그 값이 10 이상이 되면 다시 0 으로 초기화 시키는 역할을 useEffect 를 통해서 처리하게 됩니다. useEffect 함수 첫번째 파라메터에는 콜백함수를 지정하게 되고 두번째 파라메터에는 해당되는 변수들의 리스트를 지정을 해야합니다. 두번째 파라메터 부분이 엄청 중요하니 꼭 기..

React 에서 검색창 예제입니다. useState 를 사용하여 변경된 searchValue 값을 화면에 표시가 되고 리스트 값인 products 의 filter 를 사용하여 필터 검색 효과 예제입니다. 참고로 products 의 데이터는 App.js 에서 searchItems 로 값이 지정이 되어있고 props.searchItems 으로 데이터 값을 받아서 처리가 됩니다. [MySearchBar.js] import React, { useState } from "react" import './MySearchBar.css' const MySearchBar = (props) => { const products = props.searchItems; // console.log(global); const [sea..

PROPS 를 사용한 React 예제 : tag 에서 컴포넌트(component)로 값을 전달할때 사용됨 여기서는 incrementBy 값이 사용이 되어짐 props 라는 변수로 받았지만 aa 나 임의의 변수 이름으로 사용이 가능함. import React, {useState} from "react"; const MyButton = (props) => { const [currentCount, setCurrentCount] = useState(0); const handleClick = () => { setCurrentCount(currentCount+props.incrementBy); } return ( +{props.incrementBy} {currentCount} ) } export default My..

React 에서 useState 를 사용하는 예시 import React, {useState} from "react"; const MyButton = () => { const [currentCount, setCurrentCount] = useState(0); const handleClick = () => { setCurrentCount(currentCount+1); } return ( +1 {currentCount} ) } export default MyButton; 위에서 선언한 MyButton을 사용할때의 예시 import MyButton from './component/MyButton'; function App() { let subject = 'My React'; return ( {subject} ..