본문 바로가기

전체 글301

[4 - 9] 이벤트 처리하기 (state 업데이트) ★ porps는 데이터와 콜백함수도 자식 컴포넌트에게 전달할 수 있다. ★habit컴포넌트의 부모 habits 안에 있는 데이터에 맞게 자식 컴포넌트의 데이터가 표기가 되고 클릭 이벤트가 발생하면 자체적으로 처리하는 것이 아니라 전달된 props에 있는 콜백함수를 이용해 결국은 부모함수에 있는 콜백함수를 호출하는 것이다. ★state는 부분적으로 업데이트될 수 없고, 전체적으로 업데이트를 해주어야 한다. hnadleIncrement 함수 정리: const habits = [...this.state.habits] ← state에 habits이라는 배열 안에 3개의 오브젝트를 그대로 복사. const index = habits.indexOf(habit); ← 클릭했을때 habits안에 오브젝트 중 클릭한 것.. 2020. 10. 26.
[4 - 7] state 이해하기, list key ** state값을 바꿀 때 "직접적(부분적)"으로 바꾸면 리액트는 바뀐 데이터를 감지 못한다. 그렇기 때문에 항상 "전체적인" state를 업데트 해주어야 한다. ** 모든 리스트에는 고유의 key값을 설정해주어야 하는데 이때 인덱스 번호로 설정하면 절대 안된다! 2020. 10. 26.
[4 - 2] Yarn으로 프로젝트 만들기 내가 현재 사용하는 커맨드(명령 프롬트) 툴은 윈도우용 "cmder"이다. ** 기본 디렉토리 세팅은 내가 만들어둔 마스터 디렉토리로 경로를 세팅해준다. 그 후 하위 디렉토리로 프로젝트 폴더들을 만들어 프로젝트를 진행한다. ** 기본적인 커맨드 명령어들: cd: 현재 디렉토리 이름을 보여주거나 바꾼다. 다른 디렉토리로 이동할 수 있다. (cd .. 는 상위 폴더로 이동시켜준다.) cls: 화면을 지운다. dir: 디렉터리에 있는 파일과 하위 디렉터리 목록을 보여준다. mkdir: 디렉터리를 만든다 rename: 파일 이름을 바꾼다. 1. cmder에서 프로젝트를 생성하고자 하는 master 디렉토리로 이동한다. yarn create react-app 폴더명(영어) 터미널은 항상 2개를 열어둔다. a. c.. 2020. 10. 26.
:root selector and var( ) :root 가상 선택자의 특징 1. 보다 명시도가 낮다. 2. global 하다. 3. var()과 함께 자주 쓰인다. 4. :root 선택자 안에서 변수명을 선언한다. 반드시 "--"를 앞에 쓰고 변수명을 지정해야 한다. (ex: --변수이름) 주의!! 일반 선택자 안에서도 "--변수이름"을 선언할 수 있지만. 해당 선택자와 그 자식들 안에서만 적용된다. 그렇기 때문에 일반 선택자 안에서는 변수를 선언하지 않는다. var함수를 활용해 선언된 변수값을 사용할 수 있다. var(변수, 새로운 값)의 형태로 변수값을 "override(덮어쓰기)"할 수 있다. [fallback] ㄴ보통 이 방법은 선언된 변수에 값이 제대로 작동되지 않았을 경우를 대비위함인데, 애초에 :root에 값이 제대로 적용되었는지 확인.. 2020. 10. 8.
[선택자] 띄어쓰기, 조합자의 차이 div p : div 내에 있는 모든 P div > p : div 바로 근접해 있는 P 2020. 10. 8.
명시도(Css cascading 결정하는 요소) 명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다. 주의: 문서 트리 내 요소의 근접도(proximity, 가까움)는 명시도에 영향이 없습니다. inline > 아이디(#) > 클래스(.) > 요소(element) 숫자로 명시도를 계산할 수 있다. (0 0 0 0) 선택자 유형 아래 선택자는 유형별로 명시도를 증가시킵니다. 유형 선택자(h1 등) 및 의사 요소(:before 등). 클래스 선택자(.example 등), 속성 선택자([type="radio"] 등), 의사 클래스(:hover 등). ID 선택자(#example 등). 전역 선택자(*), 조합자(+, >, ~, '.. 2020. 10. 8.