Web

출처: 소플의 처음 만난 리액트

출처 : 소플의 처음 만난 리액트. create-react-app = React로 웹 애플리케이션을 개발하는 데 필요한 모든설정이 되어 있는 상태로 프로젝트를 생성해 주는 도구입니다.

( 웹 애플리케이션 = 웹 앱 = 웹 서비스 ) ≈ ( 웹 사이트 = 웹 페이지 = 웹 = 사이트 = 페이지 )

출처 : 소플의 처음 만난 리액트 JSX는 React 를 사용하여 개발할 때 거의 필수적으로 사용해야 합니다. 그렇기 때문에 이번 강의에서 JSX 의 개념을 꼭 확실하게 이해하고 넘어가시길 바랍니다.

렌더링이란 HTML,CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정 을 말합니다.

출처: 소플의 처음 만난 리액트. React 로 개발할 때 JSX 를 사용하는 것은 필수는 아니라고 했습니다. 하지만 JSX 를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장한다, ...

JSX 를 사용하면 굉장히 짧고 간결한 코드로 컴포넌트(Component)를 만들 수 있습니다. React를 사용함에 있어 JSX 는 필수적인 요소에 가깝고, 공식 웹사이트에서도 JSX 의 사용을 권장하고 있기 때문에 JSX의 사용법을 잘 익혀서 활용하시기 바랍니다.

# 임베딩이란? # XSS란?

출처: 소플의 처음 만난 리액트 # Rendering Elements 리액트 element에 대해 배워보겠습니다. 이미 이전 강의에서 React의 createElement 라는 함수에 대해서 배웠던 것을 기억하시나요?

출처: 소플의 처음 만난 리액트 # Elements의 특징 (element = react element) > React elements are immutable

출처 : 소플의 처음 만난 리액트Vscode에서 전 실습 때 만들었던 my-app 프로젝트를 엽니다. (사용자 폴더에 있을 것)src에 chapter_04 폴더를 하나 만듭니다. 만든 폴더에 Clock.jsx 파일을 새로 만들고 다음과 같이 코드를 작성합니다.Clock

출처: 소플의 처음 만난 리액트 리액트 컴포넌트는 크게 함수 컴포넌트와 클래스 컴포넌트로 나뉩니다. 이렇게 초기 버전에서는 클래스 컴포넌트를 사용하였습니다. 하지만 클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나왔고 이후에는 함수 컴포넌트를 개선해서 주로 ...

출처: 소플의 처음 만난 리액트 컴포넌트 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것입니다. 리액트에서는 컴포넌트 안에 또 다른 컴포넌틀르 사용할 수 있기 때문에 복잡한 화면을 여러개의 컴포넌트로 나눠서 구현할 수 있습니다. ...

출처: 소플의 처음 만난 리액트 - 실습: 댓글 컴포넌트 만들기

출처: 소플의 처음 만난 리액트 # State and Lifecycle

출처 : 소플의 처음 만나 리액트 # Hooks

출처 : 소플의 처음 만난 리액트

소플의 처음 만난 리액트 훅은 단순한 자바스크립트 함수이지만 두 가지 지켜야 할 규칙이 있습니다. 지금부터 훅의 규칙에 대해서 배워보도록 하겠습니다. 첫번째 규칙은Hook 은 무조건 최상위 레벨에서만 호출해야 한다.는 것입니다. 여기에서 말하는 최상위 레벨은 리액트 함

리액트 훅 실습

누가 누구를 컨트롤 하는가너가 코드를 컨트롤 하는건가? 모든 결정을 다 내리는 건가?누군가 정해준 규칙을 따라하고 있는가?라이브러리예) jQuery는 내가 필요할 때 불러온다. 예2) React코드 집합(함수, 클래스, 모듈로 구성됨)개발자가 필요한 기능을 호출하여 사

조건에 따라 출력하는 값이 다름 greeting이라는 함수 컴포넌트는props로 들어오는 isLoggedIn이라는 값이 true이면 UserGreeting이라는 컴포넌트를 리턴하고,false이면 GuestGreeting이라는 컴포넌트를 리턴한다.조건에 따라 렌더링의 결

# 조건부 렌더링 # (실습) 로그인 여부를 나타내는 툴바 만들기 ![](https://velog.velcdn.com/images/freedy/post/cdf3007b-ee89-4df0-923a-4ad

= 목록Array 배열= JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것= 열쇠열쇠는 다 모양이 다르다Key: 각 객체나 아이템을 구분할 수 있는 고유한 값= 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열리스트, 키를 사용하여 반복되는 다수

https://sumini.dev/guide/006-tips-for-frontend-beginner/CSS의 길이 단위CSS : flexflex를 사용해 레이아웃을 쉽게, 명확하게 구성할 수 있습니다.flex-direction, flex-wrap, justif

화살표 함수의 중괄호 안에는 return문이 있다.

(실습) 출석부 출력하기

소플의 처음 만난 리액트Form= 양식보통은 회원가입을 하거나 로그인을 할 때 위와 같이 텍스트를 입력하는 양식을 많이 볼 수 있는데 텍스트 입력뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택을 해야 하는 것 모두를 폼이라고 생각하면 됩니다.폼이란?사용자로부터

SignUp.jsx 파일을 다음과 같이 수정합니다.gender라는 이름의 state 가 추가되었고 성별을 입력받기 위한 <state> 태그가 추가 되었습니다.<select> 태그에는 총 두 가지 옵션이 들어가 있는데, <select> 태그의 값이 변경되

출처: 소플의 처음 만난 리액트리액트의 컴포넌트 사이에서 state를 공유하는 방법에 대해 배워 보도록 하겠습니다. 리액트로 개발을 하다 보면 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 종종 생깁니다. 이러한 경우에 각 컴포넌트의 state에 대해서

TemperatureInput 컴포넌트는 props로 scale과 temperature를 받아서 표시해주며, 온도 값이 변경되었을 때에는 props의 onTemperatureChange() 함수를 호출하여 상위 컴포넌트로 변경된 값을 전달하게 됩니다. 동일한 폴더에 C

영어에서의 Composition= 구성리액트에서의 Composition= 합성= 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 이 페이지에서 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나오는 것을 볼 수 있습니다.또한 이 페이지 자체도 하나의 리액트 컴포

이번 실습에서는 위에서 배운 두 가지 합성 방법을 사용해서 Card 컴포넌트를 만들어 보겠습니다. 먼저 앞에서 VS Code로 create-react-app을 이용해서 만든 프로젝트를 엽니다. 그러고나서 아래와 같이 chapter_13이라는 이름으로 폴더를 하나 생성합

출처: 소플의 처음 만난 리액트 # Context