본문 바로가기

전체 글

 (159)
React.js - useState 1. useState 리액트 16.8 이전 버젼에서는 함수형 컴포넌트에서 state를 사용할 수 없었다 하지만 16.8버젼 이후부터는 useState라는 함수를 이용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었다 물론 useState와 클래스형 컴포넌트에서 state사용법은 약간씩 다르고 useState를 사용과정에서 Hooks라는 것을 사용하게 된다 2. 구조 분해 할당 useState를 사용하기 전 구조분해 할당이라는 것을 알아야 하는데 이런식이다 ex) const array = [1, 2]; const [one, two] = array; 3. useState 사용하기 useState에서는 반드시 객체가 아니어도 상관이 없다 값의 형태는 자유이다 숫자일 수도 문자열 일수도 객체일 수도 ..
[React] - 컴포넌트(2) props : props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 1. 컴포넌트를 사용할 때 props 값 지정하기 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정한다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용 할 수 있다 props를 렌더링 할 때에는 JSX내부에서 { } 감싸주면 된다 App.js 에서 props값을 지정해 준다 다음과 같은 결과 값이 나온다 2. props 기본값 설정 : defaultProps App.js에서 name 값을 삭제하고 Mycomponent.js에서 다음과 같이 작성한다 3...
React.js - 컴포넌트 (1) 1. 함수형 컴포넌트 2.클래스형 컴포넌트 위 두개 코드들의 역할은 동일하다 하지만 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다 그리고 임의 메서드를 정의할 수 있다는 차이점이 있다 그리고 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 한다 그 안에서 보여 주어야 할 JSX를 반환해야 하기 때문이다 함수형 컴포넌트의 장점은 우선 클래스형 컴포넌트보다 선언하기 편하다 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다 또한 프로젝트를 완정하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다 단 함수형 컴포넌트의 주요 단점은 앞서 말했듯이 state와 라이프 사이클 API의 사용이 불가..
React - 리액트 이해 리액트의 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다 프레임워크와ㅏ 달리 오직 view만 신경 쓰는 라이브러리 이다 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트 라고 한다 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의 한다 초기 랜더링 사용자 화면이 뷰를 보여주는 것을 렌더링이라고 한다 어떤 UI 관련 프레임워크 라이브러리를 사용하든지 간에 처음 어떻게 봉일지를 정하는 초기 렌더링이 필요하다 이를 다루는 render 함수가 있다 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다 이때 render함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌..
프로그래머스[LEVEL 1] ("2019 카카오 개발자 겨울 인턴십 ") - 크레인 인형 뽑기 https://programmers.co.kr/learn/courses/30/lessons/64061 코딩테스트 연습 - 크레인 인형뽑기 게임 [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]] [1,5,3,5,1,2,1,4] 4 programmers.co.kr 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 ..
프로그래머스 [LEVEL 1] - 이상한 문자 만들기 programmers.co.kr/learn/courses/30/lessons/12930 코딩테스트 연습 - 이상한 문자 만들기 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 programmers.co.kr 풀이는 JS로 하였다 function solution(s) { let count = 0; const answer = []; for (let i = 0; i < s.length; i++) { if (s[i] === " ") { count = 0; answer.push(" "); } else if (count % 2 == 0) { answer.push(s[i].toU..
프로그래머스[LEVEL 1] - 제일 작은 수 제거하기 programmers.co.kr/learn/courses/30/lessons/12935 코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr function solution(arr) { let min = Math.min(...arr); arr.splice(arr.indexOf(min), 1); if (arr.length < 1) return [-1]; return arr } 정말 별거 아닌 문제인데 첨에 문제 이해를 잘못해서 내림차순으로 정렬한뒤 최솟값을 빼는 뻘짓을..
프로그래머스[LEVEL 1] - 수박수박수박수박수박수 ? programmers.co.kr/learn/courses/30/lessons/12922 코딩테스트 연습 - 수박수박수박수박수박수? 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 programmers.co.kr 문제 풀이는 JS로 하였다 function solution(n) { let answer = "" for(let i = 1; i < n + 1; i++){ if (i % 2) answer += '박'; else answer += '수'; } return answer; }

티스토리툴바