LG CNS AM CAMP 1기 프론트엔드

댓글 컴포넌트 Comment.js 댓글리스트 컴포넌트 CommentList.js App.js 파일에 CommentList 컴포넌트를 추가 ⬇️⬇️ 결과! ⬇️⬇️ Comment 컴포넌트에 props 변수로 전달된 값을 출력하도록 변경하기 > ⭐️⭐️ props

CRA(create-react-app), CNA(create-next-app) >리액트 기반 웹 애플리케이션 개발에 필요한 모든 설정 상태의 프로젝트를 만들어 주는 도구 CNA(create-next-app) mmkdir c:\react && cd c:\react 터

반드시 부모 요소 하나로 감싸야 한다. 다음과 같이 `` 태그로 감쌀 수 있지만 불필요한 태그가 추가된다는 단점이 있음! Fragment 컴포넌트 를 이용하면 불필요한 태그 추가를 방지할 수 있다 * 보통은 축약식을 많이 사용한다* JSX 안에서는 자바스크립

State > 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값 하위 컴포넌트에 상속 가능 state값이 변경되면 리렌더링 발생 > ### useState > 리액트의 내장 Hooks, 컴포넌트 내부에서 상태를 정의하고 이를 관리할 수 있게 해줌 모달 열고 닫기 c

State 내리기 > 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props로 전달 부모 컴포넌트의 상태 변수가 변경되면 부모와 자식 컴포넌트가 모두 리렌더링 ChildA 에게는 변수 {count} 를 count라는 이름으로 전달 ChildB 에게는 변수 {coun

DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는데 사용되는 특별한 속성 render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공⭐️DOM을 직접적으로 건드려서 ⭐️ 특정 DOM에 작업을 해야할 때 사용!state만으로 구

스크롤 박스 구현 ScrollBox 컴포넌트 생성

컴포넌트 라이프사이클 메소드 컴포넌트가 생성, 업데이트, 소멸되는 과정에서 특정 시점에 호출되는 메소드 마운트: 컴포넌트가 페이지에 나타남 * 언마운트*: 컴포넌트가 페이지에서 사라짐 업데이트: 컴포넌트 정보 리렌더링 (상태변수,props변수 변경) 라이프사이클

App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트 생성TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포넌트 세 개를 포함Lamp 컴포넌트는 색상과 크기를 부모 컴포넌트(TrafficLight

Hooks 클래스형 컴포넌트에서 제공하는 기능을 함수형 컴포넌트에서 사용할 수 있도록 도입된 함수 useEffect 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, comdponentWillUnmount를 합친 형태 useE

useRef 함수형 컴포넌트에서 DOM 요소를 직접 제어하기 위해서 사용 ref 속성(attribute)와 useRef 훅을 사용해 HTML DOM 노드와 JavaScript 코드를 연결 useRef 훅은 current 프로퍼티를 가지는 객체를 반환 useRef 활용

useReducer > 상태관리 로직이 복잡할 때 useState 대체품으로 사용 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서(reducer) 함수를 통해 상태를 관리 useReducer는 리듀스 함수와 초기 상태를 인자로 받아 상태값과 디스패치 함수를 반

useMemo > 성능 최적화를 위해 특정 값이 변경될 때만 메모이제이션된 값을 재계산하도록 하여 불필요한 계산을 방지 계산 비용이 높은 작업이나 렌더링 중에 자주 호출되는 작업에 유용 [a,b] : 의존성 배열 ➡️ a나 b가 변경될 때만 함수 수행 computeE

useCallback > useMemo 훅과 유사하게 성능 최적화를 위해 사용 콜백함수가 불필요하게 다시 생성되는 것을 방지 ➡️ 컴포넌트가 리렌더링될 때 동일한 콜백함수가 사용되도록 함 콜백 함수가 자식 컴포넌트의 props로 전달되는 경우 유용 ()=> {...

BrowserRouter React Router v6 이전부터 사용되어 온 방식으로, 선언적으고 간단한 설정을 제공 애플리케이션의 루트 컴포넌트로 설정하며, 내부에서 `, `를 통해 라우팅 구조를 정의 RouterProvider React Router v6.4 이상에

할일 목록 리스트업, 할일 추가,삭제,토글링 기능 Context API와 useContext 훅 이용

영화 정보 제공 API TMDB 오픈 API 사이트 방문하셔서 가입하면 API키를 발급받을 수 있습니다. ✔️ 영화 검색 API ✔️ 해당 영화의 비디오 클립 목록 조회 API ✔️ 유튜브 영상 실행 react-youtube 컴포넌트 이용 ➡️ https://w