Node란?

UI를 처리하는데 생기는 프레임 드랍과 스레드의 문제점을 안전하고 유연하게 처리할 수 있도록 View 객체를 감싼 것이 Node 입니다.

Node의 종류

Node

• UIView: ASDisplayNode
• UIScrollView: ASScrollNode
• UITableViewCell, UICollectionViewCell: ASCellNode
• UILabel: ASTextNode
• UITextView: ASEditableTextNode
• UIImageView: ASImageNode
• AVPlayerLayer: ASVideoNode
• UIMoviePlayer: ASVideoPlayerNode
• UIControl: ASControlNode
• UIButton: ASButtonNode
• MKMapView: ASMapNode

기존에 사용하던 UIView 대부분을 Node로 대체할 수 있고, UIView에서 제공하지 않는 기능들도 Node에서는 지원됩니다.

Node Containers

• UIViewController: ASDKViewController
• UICollectionView: ASCollectionNode
• UITableView: ASTableNode
• UIPageViewController: ASPagerNode
• UINavigationController: ASNavigationController
• UITabBarController: ASTabBarController

Node Containers를 사용하면 Node가 비동기적으로 수행되는 것을 자동으로 관리해줍니다.

Node 사용법

화면 중앙에 간단한 메세지 하나를 띄워보도록 하겠습니다.

MessageNode.swift

class MessageNode: ASDisplayNode {
    
    lazy var textNode = { () -> ASTextNode in
        let node = ASTextNode()
        node.attributedText = NSAttributedString(
            string: "Hello iOS",
            attributes:
                [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]
        )
        return node
    }()
    
    override init() { // Background
        super.init()
        self.automaticallyManagesSubnodes = true
        self.backgroundColor = .systemBackground
    }
    
    override func didLoad() { // Main
        super.didLoad()
    }
    
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec { // Background
        return ASStackLayoutSpec(
            direction: .vertical,
            spacing: 0,
            justifyContent: .center,
            alignItems: .center,
            children: [textNode]
        )
    }
    
    override func layout() { // Main
        super.layout()
    }
}

"Hello iOS"라는 메세지를 띄워줄 Node를 만들어줍니다.

layoutSpecThatFits 메서드를 이용하여 레이아웃의 방향, 간격, 배치, 정렬 등 레이아웃을 어떻게 구성할지 작성해줍니다.

ViewController.swift

import AsyncDisplayKit

class ViewController: ASDKViewController<MessageNode> {
    
    override init() {
        super.init(node: MessageNode())
        self.node.automaticallyManagesSubnodes = true
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

ViewController에 MessageNode를 띄워줍니다.

automaticallyManagesSubnodes를 활성화 시켜주면 하위 노드 추가나 삭제를 레이아웃 빌드 과정에서 알아서 처리합니다.

Node의 LifeCycle

init 메소드

UIView에서는 메인 스레드에서 동작했지만, Node는 백그라운드 스레드에서 동작합니다.
.view나 .layer와 같이 메인스레드에서 접근 가능한 속성들은 didLoad 메소드에서 접근해야 합니다.

didLoad 메소드

init메소드가 끝나고 Node 객체가 되었을 때 호출되며, 메인 스레드에서 동작하여 메인 스레드에 접근 가능한 속성들을 사용할 수 있습니다.

layoutSpecThatFits 메소드

Yoga Layout Flex-Box 기반으로 백그라운드 스레드에서 레이아웃을 설계하고 빌드합니다.
메인 스레드에서 사용가능한 요소는 사용하면 안됩니다.

layout 메소드

layoutSpecThatFits 메소드에서 레이아웃 빌드 후 메인 스레드에서 레이아웃이 변경될 때마다 호출됩니다. 레리아웃 변화에 따른 업데이트가 필요한 추가적인 요소를 처리합니다.