천천히 알아보는 코딩공부

해당 예제는 검색 input 에서 입력되는 값을 다른 router 로 보내 처리해주는 방식이다 head.js function Header({onChange}) { return ( ) } App.js function App() { const [search, setSearch] = useState(""); const onChange = (event) => { setSearch(event.target.value) } return ( ) } useState 사용 했던 이유는 onchange 값이 바뀌면 home 화면도 바뀌기 위함이다. Home.js function Home(props) { return ( {props.search} ) } props.search 에 값이 전달된다.

https://daeseok94.tistory.com/45 [react] react-router-dom v6 으로 navigate 만들어보기 1. 해당 프로젝트에 react-router-dom 사용 환경 준비 yarn을 통해 설치 yarn add react-router-dom npm을 통해 설치 npm install react-router-dom BrowserRouter : React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을 daeseok94.tistory.com router 사용 예제는 위를 참고해주세요!! Link 사용시 URL에 파라미터 표시 App.js 예 ) URL localhost.com/study_main/3 Link 삽입하는 곳 Link 로 넘어간 페이지 파라미터 가져오기 con..

React에서 기본적으로 지원하는 Hooks 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext 부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다. 4. useReducer state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다. 5. useRef 컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다. 6. forwardRef useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다. 7. useImperativeHandle useRef로 만..

React-Quill 사용하기 - Quill 이란?? 게시판 작성 할때 사용되는 에디터다 1. 설치 yarn add react-quill 또는 npm install react-quill 2. 사용 class EditorComponent extends Component{ constructor(props){ super(props); } modules = { toolbar: [ //[{ 'font': [] }], [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline','strike', 'blockquote'], [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}], ['..

react pagination 라이브러리를 사용 하지 않고 규현한 소스다 오타가 있을수도 있다...ㅠ - Spring https://daeseok94.tistory.com/59 { if(page == 0) { window.alret("최초 페이지입니다.") } else { setPage(page -1); } }; //이후 페이지 버튼 누를때 const next = (event) => { if(page + 1 == totPage) { window.alret("마지막 페이지입니다.") } else { setPage(page + 1); } }; //페이지버튼 세팅 () const pageSetting = () => { const result = [];..

삼항연산자 import React from 'react'; function App() { const test = 12345; return ( { test === 12345 ? 맞아요 : 틀려요 } ); } export default App; = 맞아요 부분이 12345가 맞으면 해당 div 출력 and 연산자 사용 import React from 'react'; function App() { const test = 12345; return ( test === 12345 && 맞아요 (AND연산) ); } export default App; 즉시발동함수를 통한 조건문 처리 import React from 'react'; function App() { const word = 'react'; return ( ..