프레임워크46 [공식문서] React에서 Next.js로 #1 마지막 레슨에서는 React를 시작하는 방법에 대해 논의했습니다. 아래는 최종 코드 예시입니다. 이 코드를 시작점으로 사용하려면 해당 코드를 코드 편집기의 index.html 파일에 붙여넣으세요. 이제 간단한 React 앱을 Next.js로 전환하는 방법을 알아보겠습니다. 2023. 8. 11. [공식문서] JavaScript에서 React로 #9 React 학습을 계속하는 방법 방금 세 가지 핵심 React 개념인 컴포넌트, 속성(props), 그리고 상태(state)를 소개 받았습니다. 이러한 개념에 튼튼한 기반을 갖추면 React 애플리케이션 구축을 시작하는 데 도움이 될 것입니다. 더 자신감을 얻게 되면 다음과 같은 React 주제도 확인해보세요. React가 렌더링을 어떻게 처리하며 어떻게 ref를 사용하는지 상태(state)를 관리하는 방법 깊게 중첩된 데이터에 context를 사용하는 방법 useEffect()와 같은 React API 훅(hook) 사용 방법 React 자원 (React Resources) 여러 해 동안 React를 학습하는 데 도움이 되는 수많은 강의, 비디오, 기사가 만들어졌습니다. 학습 스타일에 맞는 자원을 추천.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #7 Props를 사용하여 데이터 표시하기 지금까지, 컴포넌트를 재사용하려면 두 번 중복해서 같은 내용을 표시할 것입니다. function Header() { return Develop. Preview. Ship. 🚀; } function HomePage() { return ( ); } 하지만 다른 텍스트를 전달하고 싶거나, 데이터를 외부 소스에서 가져와서 정보를 미리 알 수 없는 경우는 어떨까요? 일반 HTML 요소에는 해당 요소의 동작을 변경하는 정보 조각을 전달할 수 있는 속성이 있습니다. 예를 들어 요소의 src 속성을 변경하면 표시되는 이미지가 변경됩니다. 태그의 href 속성을 변경하면 링크의 대상이 변경됩니다. 동일한 방식으로 React 컴포넌트에 속성으로 정보 조각을 전달할 수 있습니다. 이러한.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #6 컴포넌트를 사용하여 UI 구축하기 사용자 인터페이스는 구성 요소(components)라고 불리는 더 작은 구성 블록으로 분할할 수 있습니다. 구성 요소를 사용하면 독립적이고 재사용 가능한 코드 조각을 빌드할 수 있습니다. 구성 요소를 레고 브릭처럼 생각하면, 이러한 개별 브릭을 가져와서 더 큰 구조물을 형성하는 데 결합할 수 있습니다. UI의 일부를 업데이트해야 할 경우 특정 컴포넌트 또는 브릭을 업데이트할 수 있습니다. 이 모듈화는 코드가 성장함에 따라 유지 관리하기 더 쉬워지며, 응용 프로그램의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 업데이트 및 삭제할 수 있습니다. React 컴포넌트의 좋은 점은 그저 JavaScript이라는 것입니다. JavaScript 관점에서 React 컴포넌트.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #5 React 핵심 개념 React 애플리케이션을 구축하기 위해 알아야 할 세 가지 핵심 개념이 있습니다. 이들은 다음과 같습니다: 컴포넌트 (Components) 속성 (Props) 상태 (State) 다음 섹션에서는 위의 개념들을 자세히 살펴보고, 계속해서 학습할 수 있는 자원을 제공할 것입니다. 2023. 8. 11. [공식문서] JavaScript에서 React로 #4 React를 위한 필수적인 JavaScript JavaScript와 React를 동시에 학습할 수 있지만, JavaScript에 익숙하다면 React를 학습하는 과정이 더욱 수월해질 수 있습니다. 다음 섹션에서는 JavaScript 관점에서 React의 핵심 개념을 소개합니다. 다음은 언급될 JavaScript 주제의 요약입니다. 함수(Functions)와 화살표 함수(Arrow Functions) 객체(Objects) 배열(Arrays)과 배열 메서드(Array methods) 구조 분해 할당(Destructuring) 템플릿 리터럴(Template literals) 삼항 연산자(Ternary Operators) ES 모듈과 Import / Export 구문 이 강좌는 JavaScript에 대해 자세히.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #3 React로 시작하기 프로젝트에서 React를 사용하려면, react와 react-dom 두 개의 React 스크립트를 외부 웹사이트인 unpkg.com에서 불러올 수 있습니다. react는 핵심 React 라이브러리입니다. react-dom은 DOM과 관련된 메서드를 제공하여 DOM과 함께 React를 사용할 수 있게 해줍니다. 순수 JavaScript로 DOM을 직접 조작하는 대신에, react-dom에서 ReactDOM.render() 메서드를 사용하여 타이틀을 #app 요소 내에 렌더링하도록 React에 알릴 수 있습니다. 그러나 이 코드를 브라우저에서 실행하려고 하면 구문 오류가 발생합니다. 이는 ...이 유효한 자바스크립트가 아니라는 것을 의미합니다. 이 코드 조각은 JSX입니다. JSX란 무.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #2 자바스크립트와 DOM 메서드를 사용하여 UI 업데이트하기 이제 어떻게 JavaScript와 DOM 메서드를 사용하여 프로젝트에 h1 태그를 추가할 수 있는지 살펴보겠습니다. 코드 편집기를 열고 새로운 index.html 파일을 생성하세요. HTML 파일 내부에 다음 코드를 추가하세요. 그런 다음 div에 고유한 id를 지정하여 나중에 대상으로 선택할 수 있게 만드세요. HTML 파일 내부에서 JavaScript를 작성하려면 script 태그를 추가하세요. 이제 script 태그 내부에서 DOM 메서드인 getElementById()를 사용하여 id로 요소를 선택할 수 있습니다. DOM 메서드를 계속 사용하여 새로운 요소를 생성할 수 있습니다. 모든 것이 제대로 작동하는지 확인하려면 HTML 파일을 원하는.. 2023. 8. 10. [공식문서] JavaScript에서 React로 Rendering User Interfaces React의 작동 방식을 이해하려면, 먼저 브라우저가 코드를 해석하여 상호 작용 가능한 사용자 인터페이스(UI)를 생성하는 기본 개념을 이해해야 합니다. 사용자가 웹 페이지를 방문하면 서버는 브라우저에 HTML 파일을 반환합니다. 이 HTML 파일은 다음과 같을 수 있습니다. 그런 다음 브라우저는 HTML을 읽고 문서 객체 모델(DOM)을 구성합니다. DOM이란 무엇인가요? DOM은 HTML 요소의 객체 표현입니다. 이것은 코드와 사용자 인터페이스 간의 다리 역할을 하며 부모 및 자식 관계를 가진 트리 구조로 이루어져 있습니다. DOM 메서드와 JavaScript와 같은 프로그래밍 언어를 사용하여 사용자 이벤트를 수신하고 DOM을 선택하고 추가하며 업데이트하.. 2023. 8. 10. 이전 1 2 3 4 5 6 다음
