🥞 오늘 한 일

• 리액트 입문주차 개인과제
  • 질문 답변 작성
  • 제출 완료
• 리액트 기초과정 학습 목표 질문 정리
• 자바스크립트 예제 30제 (류 튜터님 공유)
  • 1주차: 기초 문법 완료
  • 2주차: ES6, 일급객체 함수, Map, Set 완료
  • 3주차: 깊은 복사/얕은 복사, 실행 컨텍스트 완료
• 알고리즘 코드카타
  • 로또의 최고 순위와 최저 순위

🍽️ 문제 해결

리액트 기초과정 학습 목표

리액트 기초과정 수강 후 아래 질문에 답하는 것이 학습 목표였기에, 과제가 마무리된 지금 각 개념에 대해 설명해보았다.

• 리액트의 기본 개념과 원리 중 "가상 돔(Virtual DOM)"에 대해 설명해주세요.
  • 실제 DOM은 아니지만, 실제 DOM을 완벽히 동일하게 복사해 객체 형태로 메모리에 저장해, 실제 DOM을 조작하는 것보다 훨씬 빠르게 조작할 수 있게 해줍니다. 변경사항을 한건 한건 적용시키는 게 아니라 모두 모아 한꺼번에 한 번만 적용시키기 때문에 한 번의 화면 갱신만으로 여러 변경 사항을 적용시킬 수 있습니다.
• 리액트에서 자주 사용되는 자바스크립트 필수 문법 중 "구조분해할당(Destructuring Assignment)"에 대해 설명해주세요.
  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식입니다. 이를 통해 편리하게 객체 내 값들을 변수에 대입할 수 있습니다. 코드의 가독성이 높아집니다.
• Vite를 사용하여 개발 환경을 구축하는 방법에 대해 설명해주세요.
  1. 터미널에서 yarn create vite my-react-app --template react (my-react-app은 변경 가능) 명령어를 통해 프로젝트를 생성합니다.
  2. 프로젝트가 생성되면 다음 명령어를 통해 프로젝트에 접근하고 실행합니다.
     cd my-react-app (아까 제작한 폴더 이름)
     yarn
yarn dev
     로컬 호스트 주소가 나오면 클릭하여 실행합니다.
• ‘부모 컴포넌트’와 ‘자식 컴포넌트’ 사이에서 데이터를 전달하는 방식에 대해 설명해주세요.
  • 부모 컴포넌트에서 props를 사용해 자식 컴포넌트로 데이터를 전달할 수 있고, 역으로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 것은 불가능합니다. 자식 컴포넌트에 props로 넘겨준 데이터들을 자식 컴포넌트는 인자로 받습니다.
• JSX 문법이 무엇이지, 일반 HTML 문법과는 어떤 차이가 있는지 설명해주세요.
  • JavaScript XML 의 준말로, Javascript 확장 문법입니다. 리액트 컴포넌트 구조를 표현할 때 사용하며, HTML과 유사한 문법으로 js 파일 내에서 UI를 만들 수 있습니다. JSX 안에서의 {}에는 표현식만 기입 가능하며, JSX는 JS로 변환된 후에 실행할 수 있습니다.
• 리액트에서 ‘Props’와 ‘State’의 역할과 차이점에 대해 설명해주세요.
  • Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨줄 때 사용하는 것이고, 읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다.
  • State는 컴포넌트 내부에서 관리되는 데이터를 의미하며 useState()를 사용해 만듭니다. 읽기와 쓰기 모두 가능하며 함수를 사용하여 값이 변경됩니다.
• 불변성(Immutability)의 원칙과 순수 함수의 개념 및 역할에 대해 설명해주세요.
  • 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체,배열,함수는 불변성이 없습니다.
  • 순수 함수란 동일한 입력에 대해 항상 동일한 출력을 반환하고, 외부의 상태를 변경하지 않고 오직 입력값에 의해서만 결과를 반환하는 함수를 말합니다. 순수 함수로 컴포넌트를 작성하면 코드가 복잡해지더라도 독립성을 유지할 수 있고, 결과를 예측 가능하기에 예상치 못한 사이드 이펙트나 버그를 방지할 수 있으며, 코드의 의도를 파악하기 쉬워 유지 보수성이 높아집니다.
• 반복되는 컴포넌트를 처리하고 분리하는 방법에 대해 설명해주세요.
  • 반복되는 구조가 있다면 컴포넌트를 만들어 같은 구조를 쉽게 관리할 수 있도록 합니다. 메인 파일(App.jsx)에서 분리하면 해당 컴포넌트 파일 내에서 export 시키고 메인 파일에서 import하는 방식으로 사용할 수 있습니다.

리액트 입문주차 개인과제

과제 질문 답변

아래는 과제를 제출할 때 함께 제출해야하는 질문에 대한 나의 답변이다. README.md 파일에 작성했다.

1. JSX 문법이란 무엇일까요?
   • JavaScript XML 의 준말로, Javascript 확장 문법입니다. 리액트 컴포넌트 구조를 표현할 때 사용하며, HTML과 유사한 문법으로 js 파일 내에서 UI를 만들 수 있습니다. JSX 안에서의 {}에는 표현식만 기입 가능하며, JSX는 JS로 변환된 후에 실행할 수 있습니다.
2. 사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이틀과 같은 애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요?
   • 불변성을 유지하면서 상태를 관리하기 위해 리액트가 가진 useState()라는 기능을 통해 상태를 관리했습니다.
3. 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?
   • props로 넘겨주는 방식으로 공유했습니다. 넘긴 props도 구조 분해 할당을 통해 쉽게 사용할 수 있도록 했습니다.
4. 기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.
   • 가장 기본적인 기능인 Todo를 추가하는 기능부터 불변성 유지가 필요했습니다. 그 이유는 리액트에서 화면을 리렌더링 여부를 결정할 때 state의 변화를 확인하게 되는데, 이 때 state의 변화 전,후의 메모리 주소를 비교할 때 불변성을 지켜주지 않고 직접 수정을 가하면 값은 바뀌나 메모리주소는 변함이 없게 되기 때문에, 리액트가 state의 변화를 인지하지 못 합니다. 때문에 push 등으로 데이터를 바꿔줬다면 리렌더링 자체가 일어나지 않았을 것이기 때문에 Todo를 추가하는 부분부터 불변성 유지가 필요했습니다.
5. 반복되는 컴포넌트를 파악하고 재사용할 수 있는 컴포넌트로 분리해 보셨나요? 그렇다면 어떠한 이점이 있었나요?
   • 컴포넌트로 분리했을 때 제일 이점이 있었던 파일은 Todo.jsx 파일입니다. 컴포넌트로 분리하지 않았을 경우 Working ul과 Done ul 모두에 각 li(Todo card)의 요소들을 모두 작성해야하는 불편함이 있었을 것인데, 컴포넌트로 만들어 재사용 가능하게 함으로써 편리하게 컴포넌트를 관리할 수 있게 되었습니다.

자바스크립트 예제 30제

고차 함수

// 고차 함수: 함수를 매개변수로 받거나 리턴하는 함수
// 아래 결과와 같이 출력되도록 고차 함수를 완성해 보세요.

function divideBy(num) {
	// 여기에 코드를 작성하세요.
}

const divideBy100 = divideBy(100);
const result = divideBy100(10);
console.log(result); // 출력 결과: 0.1

고차 함수에 대한 이해도가 낮아서 대놓고 힌트가 적혀있음에도 이상하게 풀었다.

function divideBy(num) {
	return num/100;
}

이렇게 뜻모를(?) 코드를 작성하기도 했다. 고차 함수에 대한 공부를 조금 하고 다시 차근차근 풀어보았다.

const divideBy100 = divideBy(100);
const result = divideBy100(10);
console.log(result); // 출력 결과: 0.1

여기서 아래의 divideBy100(10)처럼 함수로 사용하기 위해선, divideBy(100)이 함수를 return 해야 한다. 그리고 result의 결과가 0.1이 나오기 위한 함수를 return 해줘야하기 때문에, 다음과 같이 코드를 작성해야 한다.

function divideBy(num) {
	return function(x){
		return x / num
	}
}

이해를 쉽게 하기 위한 코드이고, 더 줄이면 이렇게도 작성할 수 있다.

function divideBy(num) {
	return x => x / num;
}

고차 함수에 대한 이해도가 훨씬 높아졌다. 역시 그냥 강의를 듣거나 자료를 보는 것보다 문제를 푸는 것이 이해를 하는 데 큰 도움이 되는 것 같다.

🍪 배운 것

ES7+ React/Redux/React-Native snippets

• clo : console.log('first', first)
• clg : console.log(first)
• useStateSnippet : const [first, setfirst] = useState(second)

🍴 느낀 점

• 오늘은 개념 설명에 시간을 꽤 투자했는데, 그냥 강의를 들을 때는 이해가 되었던 부분이 막상 말로 설명하려니 많이 어려웠다. 하지만 그만큼 도움이 많이 되었기에, 시간 낭비라고 생각말고 계속 개념에 대해 설명할 수 있게 되도록 노력해야겠다.
• 나와 두 번이나 같은 팀을 하셨던 팀원분이 개인적 사정으로 캠프를 중단하게 되셔서 많이 아쉬운 날이었다... 내 갈 길은 가야하기에 아쉬움을 뒤로하고, 다른 분들과는 끝까지 함께 달리고 싶다!

🍳 내일 할 일

• 리액트 입문주차 개인과제
  • 가이드 통해 더 발전시키기
• 자바스크립트 예제 30제 마저 풀기