개발감성

컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다, [React] 컴포넌트에 조건문 주기, if, 3항 연산 컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌 developefeel.tistory.com 이번엔 컴포넌트에 상태를 주고 버튼을 클릭해 상태를 변경해본다. 상태값 주기 클래스형 컴포넌트 Booklist에 state를 통해 테마를 white로 줬다. 2개 이상의 상태를 줄 수도 있다. 클래스형은 render함수를 통해 반환을 해야한다. 현재 컴포넌트(this)의 state의 theme값이 whit..

컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 developefeel.tistory.com 이번엔 조건문을 통해 컴포넌트의 출력을 다르게 해보도록 한다. if AppOther컴포넌트 내의 Booklist컴포넌트에 속성값으로 ASC를 주었다. Booklist의 sortOrder속성이 ASC일 경우엔 위의 경우로 ASC값이 아닐 경우에는 아래의 경우로 출력되도록 해봤다. sortOrder값에 따라 BookCard의 위치가 다르..

태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 developefeel.tistory.com 이번엔 전달받은 속성들을 다른 방식으로 전달하는 것을 알아본다. 분해 할당 props를 넘기는데 사용했던 컴포넌트에선 속성에 접근할 때 props.속성 식으로 전달했다. 분해 할당이란 props대신 어떤 속성을 받을지 명시해두고 좀 더 간단하게 전달받는 것이다. BookCard 컴포넌..

div태그를 세 개 중첩했다. 구조상으로는 parent1 > parent2 > child 이다. 부모 좌표 노드 - offsetParent( ) child 노드에 offsetParent를 적용하여 $parent변수에 저장하고 반환되는 노드의 id 속성을 콘솔창에 찍어봤다. child노드의 바로 상위는 parent2일텐데 콘솔에는 parent1으로 찍혔다. 이유는 css의 position때문이다. 따로 position을 정해주지 않아서 parent2노드는 위치계층도에서 제외된다. 노드의 지역 위치 구하기 - position( ) 5개의 물고기 이미지를 두고 해당 사진을 클릭하면 위치를 위에 표시해본다. fish클래스의 노드를 클릭했을 때 pos변수에 클릭된 노드의 position을 저장하고 str문자열을 ..

리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아 developefeel.tistory.com 보다시피 div 태그안에 태그를 중첩해 세개를 생성했는데, 태그 하나를 생성할 때마다 메소드를 호출하는 것은 번거로운 일이다. JSX - html을 JS로 변환 Babel · The compiler for next generation JavaScript The compiler for next generati..

html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for b.. developefeel.tistory.com 태그에 스타일 주기 createElement의 null로 남아있는 두 번째 인자가 스타일이 들어가는 자리다. 스타일 값을 저장해 두 번째 인자에 넣어줬다. 글자색이 파란색으로 바뀌는 것을 확인할 수 있다. 스타일을 두번째 자리에 직접 넣어 줄 수도 있다. 갈..

dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and.. developefeel.tistory.com dotnet프로젝트에서 html문서 열기 dotnet run을 통해 react프로젝트를 실행해주니 7204포트를 타고 44416포트에서 react앱이 열리는 것을 ..

div 두개의 영역이 외부 내부로 있고 각각에 마우스 이벤트를 달아 차이점을 비교해본다. mouseover & out 마우스 이벤트 중 over와 out은 부모와 자식의 노드를 따로 분리된 영역으로 판단한다. 이벤트 정보가 담길 info에 이벤트 횟수와 해당 이벤트가 일어난 타겟의 위치를 표시한다. 바깥의 parent영역만 들어갔다 나왔을 시 over와 out이 출력된다. 이번엔 parent영역에서 child영역까지 들어갔다가 나왔다. 3번에서 parent 에 들어갔고 여기서 child로 들어갈 때 parent out이 뜨고 child over이 뜬다. 이말인 즉 child로 들어갈 때는 parent에서 나가는 것으로 판단되는 것이며 child는 parent하위 개체임에도 불구하고 독립된 영역으로 취급받..

추가 버튼을 누르면 li태그가 추가되며 해당 내용이 output div태그에 기록되도록 해본다. li태그 추가 add 버튼을 클릭하면 newItem 객체를 생성하고 ul태그에 추가하는 이벤트를 생성했다. 사용자 정의 이벤트 정의 addItem이라는 이벤트를 생성하여 event변수에 담았다. 또한 위에서 생성한 $newItem의 정보들을 event에 담고 해당 객체를 트리거로 넘겨줬다. 트리거로 전달된 addItem이벤트는 ul태그에 prepend로 event내용을 출력한다. 추가 버튼을 누르면 li태그가 추가되면서 트리거를 통해 사용자가 정의한 addItem이벤트 또한 함께 실행된다. 사용자 정의 이벤트 정의2 data변수에 newItem의 속성을 담아 배열로 만들어 트리거로 전달할 수도 있다. 같은 효..

버튼 두개가 있고 버튼 B에 클릭했을 시 알림창을 띄우는 이벤트를 등록했다. 역시나 B를 클릭하면 버튼B의 알림창이 뜨는 이벤트가 실행된다. 이번엔 버튼 A에 이벤트를 걸어주는데 그 내용은 버튼B를 호출해 클릭에 트리거를 걸어준다. 그러자 버튼 A를 클릭했는데 버튼 B의 이벤트가 실행되는 것을 볼 수 있다. 버튼 A의 이벤트 자체가 버튼 B의 클릭 이벤트를 실행시키는 것이다. 이런 식으로 버튼 자체에 다른 태그의 이벤트를 걸어둔다면 해당 이벤트를 대신 실행시킬 수 있다. 까만 화면 속 숫자를 클릭해도, 버튼을 클릭해도 이벤트가 실행된다.