[WIL] 이노베이션 캠프 3주차

문지웅·2022년 8월 21일

WIL 이노베이션캠프

이노베이션 캠프

목록 보기

4/7

What I Do

리액트 기본 내용 습득
습득 내용 바탕으로 과제 진행
과제 주제: TodoList 구현
구현 결과

What I Learned

Components

컴포넌트란, 화면을 구성하는 하나의 단위
리액트에서 컴포넌트는 함수
클래스형과 함수형 컴포넌트 존재
부모 컴포넌트: 다른 컴포넌트를 품는 컴포넌트
자식 컴포넌트: 다른 컴포넌트에 품어지는 컴포넌트

❗ 컴포넌트 생성 시 주의사항

컴포넌트를 만들 때는, 가장 첫 글자는 대문자!!
폴더는 소문자로 시작하는 카멜케이스로 작성.
컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름 짓기.

JSX

Javascript + XML
리액트로 프로젝트를 개발할 때 사용
Javascript 공식문법은 아님
브라우저에서 실행하기 전에 babel을 사용해서 일반 JS 형태의 코드로 변환됨
하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함.
{} 를 사용하면 자바스크립트 코드 사용 가능

Props

props는 부모 컴포넌트로부터 받아온 데이터
컴포넌트 간의 정보를 교류할 때, Props를 사용.
자식 컴포넌트에서 부모 컴포넌트로 props 전달은 불가능!!
children: Layout 컴포넌트를 만들 때 주로 사용

//방법 1 일반 함수형
function Layout(props) {
	return <div>{props.childern}</div>;
}
export default Layout;

//방법 2 화살표 함수형
const Layout = (props) => {
	return <div>{props.childern}</div>;
}
export default Layout;

props 구조 분해 할당
props는 object literal 형태의 데이터이므로 구조 분해 할당이 가능.
구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

const Layout = ({childern}) => {
	return <div>{childern}</div>;
}
export default Layout;

defaultProps
부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값

State

컴포넌트 내부에서 바뀔 수 있는 값
State를 만들 때는, useState 를 사용

const [ value, setValue ] = useState( 초기값 )

3주차 키워드

DOM

DOM 은 Document Object Model 의 줄임마로, 웹 페이지를 이루는 테그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경사항이 적용된 Virtual DOM을 만든다. 그 다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.