Frontend/React

📌useRef? const ref = useRef(value) useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 우리가 자바스크립트를 사용 할 때에는, 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다. 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환한다. ※ref오브젝트 { current : value } ref 오브젝트는 언제든 수정할 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 컴포넌..

React Lifecycle mounting -> 태어나는 것 , component가 화면에 표시될 때  render 후 componentDidMount실행 updating -> update의 원인, state를 변경하는 것이 update 이다.  (setstate)unmounting - > 페이지를 바꿀 때 component 가 죽는 것   React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다. 마우스에 움직임을 감지하는 js코드를 react에 집어넣으려고 했더니 그냥 ..

Routing 이란?? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트는 SPA (Single Page Application) 방식 - 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. ※ 그렇다면 a태그가 있는데 왜 굳이 라우터를 따로 정의하고 사용할까? -> SPA 사용자 경험 향상의 목적이다. 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 흔히 말하는 화..

📌Axios란? HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트) 를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가 존재하지 않는다. 따라서 리액트에서 AJAX(비동기 웹 애플리케이션) 를 구현하기 위해서 Javascript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 합니다. 그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까요? 현재 리액트에서 가장 많이 사용하고 있는 HTTP Client라이브러리는 Fetch API와 Axios가 있다 📌React에서 Axios 구현하기 1. Axios 설치 npm install axios yarn add axios // 생성한 프로젝트 상단에 import로..

✅react update update = create + read 컴포넌트의 props -> 사용자가 컴포넌트로 전달한 일종의 명령 props -> 사용자가, 외부자가 내부로 전달하는 값 state -> 내부자가 사용하는 데이터 / state는 컴포넌트 안에서 얼마든지 바꿀 수 있다. prop을 state로 바꿔야한다. / prop은 수정되지 않는다. function Update(props) { return Update { event.preventDefault(); const title = event.target.title.value; const body = event.target.title.value; props.onUpdate(title, body); }}> ✅props과 useState 동시에 사용..

✅ react create function Create() { return Create # submit을 눌렀을 때 } function App() { // const _mode = useState('welcome'); // const mode = _mode[0]; // const setMode = _mode[1]; const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); const topics = [ {id:1 , title:'html', body:'html is ....'}, {id:2 , title:'css', body:'css is ....'}, {id:3 , title:'javascript', body:'jav..

✅react state prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다. 하지만 prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고 state는 컴포넌트를 만드는 내부자를 위한 데이터이다. function App() { const mode = 'READ'; const topics = [ {id:1 , title:'html', body:'html is ....'}, {id:2 , title:'css', body:'html is ....'}, {id:3 , title:'javascript', body:'javascript is ....'}, ] let content = null; if(mode === 'WELCOME'){ content = } else if(mode..

✅props 이용해 이벤트 전달하기 function Header(props){ console.log('props',props.title); return ( { event.preventDefault(); //리로드를 방지 props.onChangeMode(); }}>{props.title} ) } return ( { alert('Header'); //props의 값으로 함수 전달하기 }}> ); - react에서 사용하는 것은 유사태그이다. 그래서 html과 똑같이 사용하지 않고 onClick={}등 다른 표기를 사용해주는 것이다. - { props.onChangeMode(); } } > 여기서 a태크를 클릭하면 props.onChangeMode(); 함수가 호출되는 것이다. 꼭 props. 를 붙여 사용..