REACT30 [React] useParams Hook의 사용법 1) useParams Hook 이란 ? The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the . Child routes inherit all params from their parent routes. useParams Hook은 와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환합니다. 하위 경로는 상위 경로에서 모든 매개변수를 상속합니다. (출처 : React Router 공식 문서) 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 React Router에서 제공하는 useParams라는 훅.. 2023. 2. 14. [React] Routing의 개념과 React Router에 대해 알아보자 React Router를 사용하면 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가지기 때문에 불필요한 렌더링을 막을수 있다. 1) 라우팅(Routing)이란 ? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식입니다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있습니다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 새로고침이 발생할 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것입.. 2023. 2. 13. [React] useEffect Hook의 사용법 useEffect Hook이란 ? const App = () => { const [name, setName] = useState(''); useEffect(() => { // (1) setName('우현'); return (() => { // (2) console.log('Cleanup'); } }, []); useEffect(() => { // (3) console.log(name); }, [name]); return ( {name} ); } useEffect 이란 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 생애주기를 대신 하기 위한 Hook이다. useEffect 는 Class Component의 componentDidMount, componentDidUpdate, 그리고 compo.. 2023. 2. 12. [React] state의 개념과 useState Hook 사용법 state란 ? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}>클릭 ); } State는 컴포넌트 내부에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다. state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있고, 변경될 때마다 컴포넌트가 다시 렌더링된다. state 변경은 사용자 작업 또는 시스템 생성.. 2023. 2. 12. [React] Life Cycle의 개념 1) LifeCycle 정의 React는 컴포넌트 단위로 UI를 화면에 보이게하고, UI를 바꾸고, 현재 UI를 화면에 없앤다. 각각의 컴포넌트들은 생성-> 업데이트 -> 제거 단계를 겪는 생명주기(LifeCycle)를 가지고 있다. 2) LifeCycle API React는 컴포넌트를 DOM 위에 생성하여 Rendering(화면에 보이기) 한다. 여기서 컴포넌트가 DOM 위에 생성 시간 상황에 따라 실행되는 메소드들이 LifeCycle API 컴포넌트가 DOM 위에 생성 할 때 나타나는 상황 : 컴포넌트가 DOM 위에 처음 생성될 때(Mounting), props나 state와 같은 데이터가 변경되어 업데이트 되었을 때(Update), 컴포넌트가 DOM에서 사라질 때(Unmonting) 컴포넌트 생성시.. 2023. 2. 11. [React] Class Component와 Functional Component의 차이 클래스형 컴포넌트(Class Component) class App extends Component { render() { return 안녕! } } 기존의 React는 Class Component를 기반으로 작업했다. Class Component를 이용해 만들어낸 컴포넌트는 말그대로 하나의 객체처럼 동작할 것이다. this 를 통해 자기 자신을 칭하고, 뭔가 변화가 생기면 render() 메서드를 다시 호출해 리랜더링을 할 것이다. 그런데 객체를 사용할 때면 매번 언급되는 문제점이 있다. 객체를 이용한 프로그래밍 방식에서는 객체가 가지고 있는 상태와 메서드가 적절히 어우러지도록 설계한다. 이런 구조에서 메서드의 결과물은 상태의 영향을 받게 되는데, 상태에 따라 그 결과 값이 의도치 않게 변한다는 점이 문.. 2023. 2. 11. 이전 1 2 3 4 5 다음
