TIL

[React] Props (Memo, Props Types)

Intro 두 개의 같은 디자인의 버튼을 만듬 Props Memo Props Types Props 일종의 방식. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 text가 다른 여러 button에 같은 style을 주고 싶을 때, 버튼 컴포넌트마다 style을 복사하는 건 비효율적이다. 따라서 style의 설정들을 넘겨줄 수 있는 button 컴포넌트를 하나 만들어서 재사용하는것이 좋다. button 함수형 컴포넌트를 하나만들었다. 여기에 버튼마다 다른 text를 주려면 어떻게해야할까? 바로 여기서 사용하는 것이 Props이다. 커스텀 컴포넌트에 데이터를 전달시키기 위해 구문(syntax)를 이용한다. img 태그의 src="" 라던지, button에 EventListner을 붙여..

[React] State

Intro 버튼을 몇 번 클릭했는지 세는 어플 React.js의 state 컴포넌트에 state 추가 state 변경 시 UI 리렌더링 state란? 기본으로 데이터가 저장되는 곳. 이 어플에서는 버튼을 몇 번 클릭했는지 세는 counter. 즉 바뀌는 데이터를 state로 만들 수 있다. 컴포넌트나 JSX에 변수(데이터)를 추가하고 싶을 때 바닐라 JS => ${변수}로 전달 span.innerText = `Total clicks: ${counter}`; React JS => 단순히 중괄호에 변수를 넣어준다. Total clicks: {counter} 데이터가 변경되어, 사용자에게 변화된 내용을 보여주고 싶을 때 (리렌더링) 1. render 함수를 다시 호출해 UI 업데이트 데이터가 변경될 시, re..

[React] Component, JSX

Intro 버튼을 몇 번 클릭했는지 세는 어플을 바닐라 JS와 React JS를 사용해 구현해보고 비교 Component를 만들고 화면에 렌더링하기 ( JSX ) 바닐라 JS 로 구현하기 Total clicks: 0 Clcik me document.querySeletor(selectors); 제공한 선택자와 일치하는 문서 내 첫번째 엘리먼트 반환한다. const button = document.querySelector("button"); React JS 로 구현하기 React를 사용하기 위해서 두 개의 Javascript 코드를 import 한다. react와 react-dom인데 둘의 차이는 밑에서 설명한다. 1. React JS로 Component를 생성하는 (어려운) 방법 React 규칙 하나. H..

[VSCode] github commit push 하기

저번포스팅에선 vscode에서 github에서 리포지토리를 clone해 로컬컴퓨터와 연동시키는 법을 설명했다. [VSCode] github 연동하기 (git clone) 깃허브에 만든 새 리포지토리를 vscode에 연동하기 위해선 로컬컴퓨터로 git을 clone해야한다. 1) git clone '리포리토리 복제' 버튼 선택 2) git 주소 입력 github에서 만든 리포지토리의 주소를 복사 'Code' hu-coding.tistory.com vscode에서 코드를 수정하고 git에 commit과 push하는 방법은 다음과 같다. 1) 코드 수정 후 저장 먼저 commit할 코드를 수정하자. 2) 왼쪽에서 세번째 아이콘인 '소스제어' 를 클릭 자동으로 수정된 파일들이 탐지되어있다. 파일 옆 '+' 버튼 ..

[VSCode] github 연동하기 (git clone)

깃허브에 만든 새 리포지토리를 vscode에 연동하기 위해선 로컬컴퓨터로 git을 clone해야한다. 1) git clone '리포리토리 복제' 버튼 선택 2) git 주소 입력 github에서 만든 리포지토리의 주소를 복사 'Code' > 주소복사아이콘 다시 vscode에 복사한 리포지토리 주소 입력 3) 로컬컴퓨터에 clone할 폴더 선택 git 주소 입력후 local 컴퓨터에 저장될 위치(폴더)를 선택 4) clone된 workspace 확인 github에서 local 컴퓨터로 clone된 workspace 확인 가능

[JAVA] 프로그래머스 : 자릿수 더하기

https://programmers.co.kr/learn/courses/30/lessons/12931 코딩테스트 연습 - 자릿수 더하기 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 입출 programmers.co.kr 풀이 각 자릿수를 구하기위해 10씩 나눈 나머지를 더한다. import java.util.*; public class Solution { public int solution(int n) { int answer = 0; while(n != 0){ answer += n%10; n /= 10;..

[JAVA] 프로그래머스 : 약수의 합

https://programmers.co.kr/learn/courses/30/lessons/12928 코딩테스트 연습 - 약수의 합 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 입출력 예 n return 12 28 5 6 입출력 예 설명 입출력 예 #1 12의 약수 programmers.co.kr 풀이 간단하게 숫자의 절반까지만 for문을 돌리는 방법으로 풀었다. 12의 경우 약수가 1,2,3,4,6,12이므로 6까지 돌려서 더하고 마지막에 12를 더해서 return하면된다. class Solution { public int solution(int n) { int answer = 0; for (int ..

[JAVA] 프로그래머스 : 정수 제곱근 판별

https://programmers.co.kr/learn/courses/30/lessons/12934?language=java 코딩테스트 연습 - 정수 제곱근 판별 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함 programmers.co.kr 풀이 양의 정수인지 아닌지 판별을 위해 1로 나눠서 나머지가 0임을 확인했다. class Solution { public long solution(long n) { double x = Math.sqrt(n); // n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴 // 1로 나눴을때 나머지가 0이면 정수..