소플의처음만난리액트6 소플의 처음 만난 리액트_실습12 소플의 처음 만난 리액트_실습12 컨텍스트란? - 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식 - 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음 - 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우 - Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트이 데이터를 읽을 수 있음 고려할 점 - 재사용성이 떨어짐 - 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면, 기존 방식대로 데이터를 전달하는 것이 더 적합 컨텍스트 API - React.createContext() 컨텍스트를 생성하기 위한 함수 컨텍스트 객체를 리턴 기본값으로 undefined.. 2023. 8. 3. 소플의 처음 만난 리액트_실습5 소플의 처음 만난 리액트_실습5 훅(Hook) 리액트의 state와 생명주기 기능에 갈고리(Hook)를 걸어 원하는 시점에 정해진 함수를 실행되도록 만드는 것 ♪ useState() state를 사용하기 위한 훅 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않음 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() 사용 사용법 → const [변수명, set함수명] = useState(초기값); * 변수 각각에 대해 set 함수가 따로 존재함 ♪ useEffect() 사이드 이펙트를 수행하기 위한 훅 사이드 이펙트란? 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업 useEffect() 훅만으로 클래스 컴포넌트의 생명주기 함수들과 동일한 기능을 수행할 수 있.. 2023. 7. 11. 소플의 처음 만난 리액트_실습4 소플의 처음 만난 리액트_실습4 State 리액트 컴포넌트의 변경 가능한 데이터 컴포넌트를 개발하는 개발자가 직접 정의해서 사용 state가 변경될 경우 컴포넌트가 리렌더링 됨 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 State의 특징 자바스크립트 객체 형태로 존재 직접적인 변경이 불가능 함 - 클래스 컴포넌트 생성자에서 모든 state를 한 번에 정의 state를 변경하고자 할 때에는 꼭 setState()함수를 사용해야 함 - 함수 컴포넌트 useState() 훅을 사용하여 각각의 state를 정의 각 state별로 주어지는 set함수를 사용하여 state 값을 변경 생명주기 마운트 componentDidMount() - 컴포넌트가 생성될 때 업데이트 componentDidU.. 2023. 7. 11. 소플의 처음 만난 리액트_실습3 소플의 처음 만난 리액트_실습3 컴포넌트 기반 구조 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. props 리액트 컴포넌트의 속성 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 props의 특징 읽기 전용 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 함 props의 사용법 JSX를 사용할 경우 컴포넌트에 키-값 쌍 형태로 넣어주면 됨 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 함 JSX를 사용하지 않는 경우에는 createElement()함수의 두 번째 파라미터로 자바스크립트 객체를 넣어 주면 됨 컴포넌트의 종류 클.. 2023. 7. 11. 이전 1 2 다음 반응형
