Programming/Front-end Language

[React] useEffect 사용법

React useEffect 사용법 useEffect가 필요한 이유? 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때 마다 실행시키고 싶은 작업이 있을 시 사용할 수 있다. useEffect 란? 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것. componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행. componentDidUpdate: 리렌더링을 완료 한 후 실행. 즉 render()가 업데이트 될 때마다 실행 compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. 실제로 코드를 통해서 보자 1. 첫 번째 형식 /*첫 번째*/ useEffec..

[React] React로 Voca 만들기 -2

App.js import './App.css'; import Hello from './component/Hello'; import UseState from './component/SampleUseState'; import Welcome from './component/Welcome'; import SampleUseState from './component/SampleUseState'; import Header from './component/Header'; import DayList from './component/DayList'; import Day from './component/Day'; import EmptyPage from './component/EmptyPage'; import { Browse..

[React] filter() 함수

filter() 함수는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 함수이다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] filter를 이용하여 words데이터 중에서 길이가 6보다 큰 데이터를 result에 담아 출력을 할 수 있다. 조건에 맞는 값만 출력을 할 때 사용을 하면 된다.

[React] Map() 함수를 이용한 반복

Map()함수 map 함수는 반복되는 컴포넌트를 랜더링 시키는 함수이다. 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성한다. arr.map(callback,[thisArg]) Parameters: Callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 thisArg : callback 함부 내부에서 사용할 this 레퍼런스 index : 연재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 export default function Day() { const day= 3; const worldList = vocaData.words.filter(word=>(word.d..

[React] React로 Voca 만들기 -1

리엑트로 간단한 VOCA를 만들었다. 현재 화면 App.js import './App.css'; import Hello from './component/Hello'; import UseState from './component/SampleUseState'; import Welcome from './component/Welcome'; import SampleUseState from './component/SampleUseState'; import Header from './component/Header'; import DayList from './component/DayList'; import Day from './component/Day'; function App() { return } export de..

[React] React Hooks - useState 사용법

Hook 리액트 v16.8 에 새로 도입된 기능으로서, 기존의 함수형 컴포넌트에서도 상태 관리나 주기 관리를 할 수 있도록 다양한 기능을 제공하는 것. 컴포넌트의 상태 관리를 위해 Reack Hooks에서는 useState를 제공을 한다. - useState를 이용하지 않고 변경을 하려면 //useState를 이용하지 않고 변경 function changeName(){ name = name === "sanha" ? "jeongkyun" : "sanha"; console.log(name) document.getElementById("name").innerText=name; } return( {name}({age}) :{msg} Change ); document.getElementById로 id값이 name..

[react]WYSIWYG(위지윅) 텍스트 에디터(ckEditor) 출력

위지윅 텍스트 에디터를 이용하여 db에 저장하면 html형식 그대로 저장이 된다. 그대로 웹에 출력을 할 때는 dangerouslySetInnerHTML를 이용을 하면 출력을 할 수 있다. await axios .get(baseUrl+'/board/viewBoard',{params:{board_code:board_code}}) .then((response)=>{ setBoard(response.data); }) .catch((error) => { console.log(error); }) } call(); }, []); let codes = board.board_content; board.board_content는 axios를 이용하여 비동기로 db에 접근하여 데이터를 가져와 codes 변수에 넣었다. d..

[react]WYSIWYG(위지윅) 텍스트 에디터(ckEditor) 사용하기

WYSIWYG 이란? What You See Is What You Get 의 약자로 '보이는 그대로 얻는다' 라는 의미, 즉 문서 편집 과정 도중 포맷 된 형태의 텍스트가 그대로 출력되는 것을 말한다. 게시판 글쓰기 기능을 구현할 때 유용하게 사용을 할 수 있다. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 처음에 터미널창에 입력을 하여 내가 진행하고 있는 프로젝트 폴더에 설치를 해준다. import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 리액트 프로젝트..